1

When I have a container with max-width:80vw and max-height:80vh, the image contained within it is not behaving properly in line with object-fit:contain. The image has height:100% and width:100% as well as object-fit:contain but the shortest dimension of the image fills the container with the longer dimension overflowing.

Please have a look at this url:

https://mutatedllama.pythonanywhere.com/share/7h25JNbi

Could somebody help me to understand where I am going wrong?

Chris
  • 335
  • 4
  • 14

1 Answers1

2

height: 100% only works if every ancestor element also has a defined height (so implicit height: auto; will cause it to fail).

I was able to make it work in the page by setting an explicit height: 100% on html, body, div.container, div.row.justify-content-center, and div#image-box - this is the descendant path from <html> to the <img /> - but obviously this is a bad idea.

In short: don't use height: 100%;

Instead, make the div#image-box a display: flex; with flex-direction: column; and give the img flex-grow: 1;.

Things are complicated by the overlay img sibling of the original cat picture - you may need to play with your HTML structure.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • Thank you, your comment helped! Your first statement made it click for me - the parent did not have a defined height, only a max-height. When I replaced max-height and max-width with height and width it worked. Thanks! – Chris Feb 07 '20 at 22:10