Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Object-fit: cover not working correctly on Safari

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. enter image description here

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;
    }
  }
like image 411
KJParker Avatar asked Feb 12 '20 16:02

KJParker


People also ask

Why object-fit property is not working?

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.

What does object-fit cover do?

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.

Can I use object-fit contain?

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.

Which of the following is true about the CSS property object-fit?

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.


1 Answers

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;
}
like image 164
Sean Tubridy Avatar answered Sep 19 '22 19:09

Sean Tubridy