Make responsive image fit parent container

Question

I've been trying to figure out if there is a pure CSS solution to ensure the image within my banner doesn't go below the height of the parent but keep ratio of the image.

You can see a demo here: 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 aim is to have the image always 100%, but never below 300px in height. This would mean image cutoff, but thats fine, i just want to know if there is a pure CSS solution, or if i need to use jQuery

score 22 · Accepted Answer · answered Nov 04 '13 at 23:40

22

Instead of using an < img > tag, I made that image the background-image for a 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's the fiddle I was using: http://jsfiddle.net/MathiasaurusRex/LkxYU/4/

Here's the complete 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;
}

answered Nov 04 '13 at 23:40

Mathias Rechtzigel

3,596
1
18
37

I don't know why i didnt think of background image! Thank you for the great answer – Gerico Nov 05 '13 at 07:41
Background image doesn't work with Google Robots and Spiders so the image will not available for search. Should not be used in case of products or items to be displayed and searchable – Raffaeu Aug 14 '15 at 11:58
1

@Raffaeu you can add background images to your sitemap using image tag definitions. See more here - https://support.google.com/webmasters/answer/178636 While it's a slight work around, it is a false assumption to say that google can't crawl background images. – Mathias Rechtzigel Aug 14 '15 at 14:52
Good to know I wasn't aware of this – Raffaeu Aug 14 '15 at 15:47

score 1 · Answer 2 · answered Nov 04 '13 at 23:41

Your image will inevitably be out of ratio depending on the screen size, why not try a 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 could just add a max height to your image tag:

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

score 0 · Answer 3 · answered Nov 04 '13 at 23:35

0

try:

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

answered Nov 04 '13 at 23:35

Adriana

91
3

score 0 · Answer 4 · answered Nov 04 '13 at 23:39

Use max-height and max-width to be sure that image will always fit 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 miss the part where you wrote about 300px cut-off stuff :) MathiasaurusRex's answer is correct.

Make responsive image fit parent container

4 Answers4

Linked