Best IT Recipes

Child with maximum height: 100% overflows parent

I'm trying to figure out what the unexpected behavior is for me:

I have an element with a maximum height of 100% inside the container, which also uses the maximum height, but, unexpectedly, the child element 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 pointer is set to explicit height:

Test case: http://jsfiddle.net/bq4Wu/17/

 .container { height: 200px; }

Does anyone know why the child did not comply with the maximum height of his parent in the first example? Why is explicit height required?

+122
css
Jan 10 '13 at 16:44
source share
7 answers

When you specify the percentage for max-height for the child, this is a percentage of the actual height of the parent, and not the parent max-height , it is strange enough . The same goes for max-width .

So, unless you specify an explicit height for the parent, then there is no base height for the max-height child, so max-height computes to none , allowing the child to be as tall as possible. The only other restriction now acting on the child is the max-width its parent, and since the image itself is above its width, it overflows the height of the container down to maintain its aspect ratio, but still in size is possible in general.

When you indicate the explicit height for the parent, then the child knows that he should be no more than 100% of this explicit height. This allows you to limit the parental height (while maintaining its aspect ratio).

+170
Jan 10 '13 at 17:11
source share

I played a little. On a larger image in firefox, I got a good result using the value of the inherit property. Will this help you?

 .container { background: blue; padding: 10px; max-height: 100px; max-width: 100px; text-align:center; } img { max-height: inherit; max-width: inherit; }
+61
Jan 10 '13 at
source share

I found a solution here: http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

The trick is possible because there is a relationship between the WIDTH and the PADDING-BOTTOM element. So:

Parent:

 container { height: 0; padding-bottom: 66%; /* for a 4:3 container size */ }

child ( remove all css associated with the width , i.e. width: 100%):

 img { max-height: 100%; max-width: 100%; position: absolute; display:block; margin:0 auto; /* center */ left:0; /* center */ right:0; /* center */ }
+7
Nov 21 '14 at 15:51
source share

Maybe someone else can explain the reasons for your problem, but you can solve it by specifying the height of the container and then setting the image height to 100%. It is important that the width image is displayed before the height .

 <html> <head> <style> .container { background: blue; padding: 10px; height: 100%; max-height: 200px; max-width: 300px; } .container img { width: 100%; height: 100% } </style> </head> <body> <div class="container"> <img src="http://placekitten.com/400/500" /> </div> </body> </html>
+2
Jan 10 '13 at 16:52
source share

The closest I can access is the following example:

http://jsfiddle.net/YRFJQ/1/

or

 .container { background: blue; border: 10px solid blue; max-height: 200px; max-width: 200px; overflow:hidden; box-sizing:border-box; } img { display: block; max-height: 100%; max-width: 100%; }

The main problem is that the height takes a percentage of the height of the containers, so it looks for the explicitly set height in the parent container, not max-height.

The only way around this to some extent, I see, is the fiddle above, where you can hide the overflow, but then the fill still acts as the visible space for the image, and instead is replaced with a solid border (and then adding a border box to make it 200px if you need this width)

Not sure if this will fit what you need, but perhaps best.

+2
Jan 10 '13 at 17:17
source share

You can use the object-fit property

 .cover { object-fit: cover; width: 150px; height: 100px; }

As suggested here

Full explanation of this property of Chris Mills in Dev.Opera

And even better in CSS tricks

Supported in

  • Chrome 31+
  • Safari 7.1+
  • Firefox 36+
  • Opera 26 +
  • Android 4.4.4 +
  • iOS 8+

I just checked that vivaldi and chrome support it (not surprising)

It is currently not supported in IE, but ... who cares ? In addition, iOS supports binding to objects, but not to the object position, but soon.

+2
Jul 6 '15 at 9:30
source share

Your container has no height.

Add height: 200 pixels;

into css containers and the kitten will remain inside.

0
Jan 10 '13 at 17:22
source share


More articles:


All Articles