Make parent container compliant

Question

I tried to find out if there is a pure CSS solution so that the image inside my banner does not fall below the height of the parent, but maintains the image ratio.

Here you can see the demo: http://jsfiddle.net/LkxYU/1/

HTML:

<div class="banner_holder"> <img src="http://placekitten.com/g/800/600"/> </div> 

CSS

 .banner_holder{ width: 100%; height: 300px; min-height: 200px; position: relative; outline:1px dotted red; } .banner_holder img{ width: 100%; } 

My goal is to always have an image 100%, but not lower than 300 pixels high. This will mean cropping the image, but it's fine, I just want to know if there is a clean CSS solution or if I need to use jQuery

Answer 1

Instead of using <img>, I made this image the background for the div and gave it the following styles:

 .banner_holderImage{ height: 100%; position:relative; background: url("http://placekitten.com/g/800/600")no-repeat; background-size: cover; background-position: center; } 

here is the fiddle I used: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

Here's the full HTML and CSS:

 <div class="banner_holder"> <div class="banner_holderImage"></div> </div> 

-

 .banner_holder{ width: 100%; height: 300px; min-height: 200px; position: relative; outline:1px dotted red; } .banner_holderImage{ height: 100%; position:relative; background: url("http://placekitten.com/g/800/600")no-repeat; background-size: cover; background-position: center; } 

Answer 2

try:

 .banner_holder img{ height: 100%; /* OR */ height: inherit; } 

Answer 3

Use max-height and max-width to make sure the image will always match the parent div:

 .banner_holder{ width: 200px; height: 300px; position: relative; outline:1px dotted red; } .banner_holder img{ max-width: 100%; max-height: 100%; } 

EDIT: Sorry, I missed the part where you wrote about 300px cut things :) MathiasaurusRex answer is correct.

Answer 4

Your image will inevitably be missing depending on the screen size, why not try the background image:

 .banner_holder{ width: 100%; height: 300px; min-height: 200px; position: relative; outline:1px dotted red; background: url('http://placekitten.com/g/800/600') center no-repeat; background-size: cover; } 

or you can simply add the maximum height to your image tag:

 .banner_holder img{ width: 100%; max-height: 300px; }