Dan Christian Dan Christian - 15 days ago 5
CSS Question

Image 100% height of container - min-height behaves differently on Chrome/Safari

I want the image to fill the height of its container and then use

object-fit: cover
to take care of the aspect ratio. In Chrome this achieves the desired effect. However, in Safari the containing divs are now very tall.

http://codepen.io/anon/pen/GjzPvN

Why is there a discrepancy between Chrome and Safari? Which one is correct and if Safari is correct, is there a better way to achieve this, preferably without using
position: absolute
?

Answer

Safari does it correctly, because of the wrong support for min-height by Chrome. If you need consistency, you must use vh, this way:

img {
  width: 100%;
  min-height: 100vh;
  object-fit: cover;
}
Comments