studio-variable/index-main
4
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

support of picture in css
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-09 18:56:31 +01:00
parent 7fc1794b3d
commit 509eb0ddab
4 changed files with 42 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

63
assets/css/components/_figures.scss
View file

@ -1,6 +1,7 @@
@mixin figure-16-9{
figure{
& > picture,
& > figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
@ -17,6 +18,7 @@
@mixin figure-3-1(){
& > picture,
& > figure{
aspect-ratio: 3/1;
overflow: hidden;
@ -30,36 +32,33 @@
@mixin figure-2-1(){
figure{
aspect-ratio: 2/1;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
// @mixin figure-2-1(){
// & > picture,
// & > figure{
// aspect-ratio: 2/1;
// overflow: hidden;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
// }
// @mixin figure-16-9-hover{
// figure{
// aspect-ratio: 16/9;
// display: flex;
// overflow: hidden;
// img{
// width: 100%;
// height: 100%;
// object-fit: cover;
// transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
@mixin figure-16-9-hover{
figure{
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
}
&:hover{
figure img{ transform: scale(1.05); }
}
}
// }
// }
// &:hover{
// figure img{ transform: scale(1.05); }
// }
// }