having an issue with browser support right now.
I have it working as hoped for Firefox and Chrome, however on safari I am having issues with images. Currently, the image is set using "object-fit: cover" and has the intended effect on Chrome/firefox. But for safari, it seems to ignore it and the image is very large. Here is a screenshot. The left is the intended the right is the actual outcome.
Here is an html and css snippet of my code effecting this row/column.
<div class="feature-image">
<img class="img-1" src="@/assets/preview-images/feature 1.png" alt="">
</div>
.feature-image {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.img-2 {
max-width: 320px;
}
}
For object-fit to work, the image itself needs a width and height . In the OP's CSS, the images do not have width and/or height set, thus object-fit cannot work.
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video> , should be resized to fit its container. You can alter the alignment of the replaced element's content object within the element's box using the object-position property.
Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.
The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit. contain - The image keeps its aspect ratio, but is resized to fit within the given dimension. cover - The image keeps its aspect ratio and fills the given dimension.
I had the same issue. I found that setting a min-height of % 100% instead of a height of 100% solved it in Safari. I haven't tested it on width but it might work for you.
.object-fit-cover-photo {
width: 100%;
min-height: 100%;
object-fit: cover;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With