I'm trying to understand what appears to be unexpected behaviour to me:
I have an element with a max-height of 100% inside a container that also uses a max-height but, unexpectedly, the child overflows the parent:
Test case: http://jsfiddle.net/bq4Wu/16/
.container {
background: blue;
padding: 10px;
max-height: 200px;
max-width: 200px;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
}
This is fixed, however, if the parent is given an explicit height:
Test case: http://jsfiddle.net/bq4Wu/17/
.container {
height: 200px;
}
Does anyone know why the child would not honour the max-height of its parent in the first example? Why is an explicit height required?
I played around a little. On a larger image in firefox, I got a good result with using the inherit property value. Will this help you?
I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
The trick is possible because it exists a relation between WIDTH and PADDING-BOTTOM of an element. So:
parent:
child (remove all css related to width, i.e. width:100%):
The closest I can get to this is this example:
http://jsfiddle.net/YRFJQ/1/
or
The main problem is that the height takes the percentage of the containers height, so it is looking for an explicitly set height in the parent container, not it's max-height.
The only way round this to some extent I can see is the fiddle above where you can hide the overflow, but then the padding still acts as visible space for the image to flow into, and so replacing with a solid border works instead (and then adding border-box to make it 200px if that's the width you need)
Not sure if this would fit with what you need it for, but the best I can seem to get to.
Here is a solution for a recently opened question marked as a duplicate of this question. The
<img>
tag was exceeding the max-height of the parent<div>
.Broken: Fiddle
Working: Fiddle
In this case, adding
display:flex
to the 2 parent<div>
tags was the answerYou can use the property object-fit
Like suggested here
A full explanation of this property by Chris Mills in Dev.Opera
And an even better one in CSS-Tricks
It's supported in
I just checked that vivaldi and chromium support it as well (no surprise here)
It's currently not supported on IE, but... who cares ? Also, iOS supports object-fit, but not object-position, but it will soon.
Your container does not have a height.
Add height: 200px;
to the containers css and the kitty will stay inside.