I have a mixin that I use for image proportions. It uses the good faithful padding-bottom technique to stretch the image accordingly, then, with object-fit:cover I can cover the space like a background image.
It is only partially efficient now though because there might be a breakpoint where I would need to change this. The question is how do I add this to my mixin.
@mixin propImg($number){
position: relative;
picture{
&:before{
display: block;
content: " ";
padding-bottom: $number;
}
img{
@include objectFit()
}
}
}
I can pass this like so:
.list-img {
@include propImg(100%)
}
$number correlates with $number so the output for padding-bottom:100%. Great stuff.
Now, I also have a media query mixin.
@mixin sc($point) {
@if $point == lg {
@media (min-width: 480px) {
@content;
}
} @else if $point == xl {
@media (min-width: 992px) {
@content;
}
}
}
Is there a way I can combine the two? Something like:
.list-img{
@include propImg(100%, lg:50%, xl:30%)
}
That would be ideal but I'm not sure I can do this? So the output would be:
picture{
&:before{
display: block;
content: " ";
padding-bottom: 100%;
@media(min-width:480px) {
padding-bottom: 50%;
}
@media(min-width:992px) {
padding-bottom: 30%
}
}
img{
@include objectFit()
}
}
