I'm trying to use the picture tag in order to make my pics look nice, hoping that they would not stretch in an ugly manner, but for some reason it's just not being applied. What am I doing wrong?
I see the pictures but it would be the same effect if I just added the imgs to the html file.
.gratitude__image {
height: 316px;
width: 100%;
@include tablet-small {
height: 237px;
}
@include mobile {
height: 176px;
}
}<picture class="gratitude__pic"><source type="image/webp" media="(min-width: 1256px)" srcset="img/gratitude-image-desktop.webp, img/gratitude-image-desktop@2x.webp"><source type="image/webp" media="(min-width: 768px)" srcset="img/gratitude-image-tb.webp, img/gratitude-image-tb@2x.webp"><source type="image/webp" srcset="img/gratitude-image-mb.webp, img/gratitude-image-mb@2x.webp"><source media="(min-width: 1256px)" srcset="img/gratitude-image-desktop.png, img/gratitude-image-desktop@2x.png"><source media="(min-width: 768px)" srcset="img/gratitude-image-tb.png, img/gratitude-image-tb@2x.png"><img class="gratitude__image" src="img/gratitude-image-mb.png" srcset="img/gratitude-image-mb@2x.png" alt="Thanks"></picture>Unfortunately, I can't add the pics due to the NDA agreement, but I think the problem is somewhere in my code - I've checked the names of the files, they all seem to be correct.
If you know how to fix this - please let me know!