make img responsive and fill into a div

Question

I have a div with a defined width and height. Then I have an image which I want to fit on it (keeping proportions). Like that JsFiddle :

<div style="width: 200px; height: 300px; background: red;">
    <img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: 100%; max-height: 100%" />
</div>

Now I want a div wrapped on the img (that is ajusted exactly to the img width and height and position) because then want to have some elements inside the div with position:absolute relatively to the img. Check on JsFiddle:

<div style="width: 200px; height: 300px; background: red;">
    <div style="display: inline-block; max-width: 100%; max-height: 100%; background: blue;">
                <img src="http://placehold.it/200x800" style="width: auto; height: auto; max-width: inherit; max-height: inherit" />

    </div>
</div>

The result is wrong, cause the img is overlayed on the div. I want the img to resize like in the first example.

In Child with max-height: 100% overflows parent they pointed out that the div needs to have a height and a width, but then the div will not be filling the whole img.

There is actually a way to do it?

My whole layout is more complex and totally responsive with flex on top and the example here is just an approximation focused on the issue I have. So any solution with fixed height and width will be wrong.

bookcasey · Answer 1 · 2015-04-19T16:56:06.987

4

Don't use an extra div. Just use a background-image. Cleaner, easier, more semantic. Can position things absolutely on the one wrapper div.

CSS:

.wrapper {
  width: 200px; 
  height: 300px; 
  background: url('http://placehold.it/200x800'), red; 
  background-size: auto 100%;
  background-repeat: no-repeat;
}

HTML:

<div class="wrapper"></div>

Demo

example

Alternatively, if you're dead set on having an extra div, you can accomplish the same effect like this:

CSS:

.wrapper {
    width: 200px; 
    height: 300px;
    background: red;
}

.inner-wrapper {
    width: 0;
    height: 100%;
}

.inner-wrapper img {
    height: 100%;
}

HTML:

<div class="wrapper">
    <div class="inner-wrapper">
        <img src="http://placehold.it/200x800">
    </div>
</div>

Demo

example

edited Apr 19 '15 at 16:56

answered Apr 19 '15 at 16:18

bookcasey

39,223
13
77
94

I don't want the image to be cut, of course. I want it as the first example – Didac Montero Apr 19 '15 at 16:36
Yes you are right the result is the same as a he first example. But I need a div around the IMG filling exactly the same area as the IMG cause when I add a child to the div with absolute position, it should be absolute relatively the IMG – Didac Montero Apr 19 '15 at 16:58
All these things have fixed px values, can you just add and subtract to find the right spacing? Or even easier position from the left which makes the size or existence of an additional div irrelevant? If not, can you be more specific about the problem you are trying to solve, rather than the means which you think you need to solve it? I'm having trouble imagining how this would be necessary. I think you might be making this more complicated and creating problems for yourself. – bookcasey Apr 19 '15 at 17:20
My layout is responsive and the img could have any size. So your answer do not work for what I want. Maybe it wasn't clear, but what I wanna have is something like: http://jsfiddle.net/umbreak/n6czk9xt/21/ – Didac Montero Apr 20 '15 at 10:20
You could use background-size: cover; – M_Griffiths Apr 20 '15 at 12:09
The img will not fit the proportions and whole area of the div anyway, so it's not the same (the img has to keep the img proportions, while the div not). Maybe using the trick of `padding-bottom`: http://stackoverflow.com/questions/1495407/maintain-aspect-ratio-when-resizing-a-div-using-css#answer-10441480 – Didac Montero Apr 21 '15 at 07:14

score 0 · Answer 2 · answered Apr 19 '15 at 17:15

Try this if you are trying to make your image responsive

<div style="width:40%; height: 80%; background: red;">
                <img src="http://placehold.it/200x800"/>

    </div>

CSS

img{
    height:50%;
    width:50%;
}

(if you want it for a particular image thn you can create an ID and give this properties and use that ID for that image)

Try it on fiddle.

Didac Montero · Answer 3 · 2015-04-20T10:58:38.893

I've found a solution but not pure CSS. I had to use JQuery and I'm not so happy about it but it works.

I would be glad to hear from some pure CSS solution (with a responsive layout and any image size), but up to now non of the offered worked for my case.

DEMO

HTML

<div class="container">
    <img src="//placehold.it/200x300" class="img-responsive centered" />
    <div class="img-wrapper centered">
        <div class="point" style="bottom: 0%; right: 0%;"></div>
        <div class="point" style="top: 0%; right: 0%;"></div>
        <div class="point" style="top: 0%; left: 0%;"></div>
        <div class="point" style="bottom: 0%; left: 0%;"></div>
    </div>
</div>

CSS

html, body{ height: 100%;}
.container {
    position: relative;
    width: 100%;
    height: 100%;
    background: red;
}
.centered {
    position:absolute;
    max-width: 100%;
    max-height: 100%;
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
}
.img-responsive {
    position: absolute;
    width: auto;
    height: auto;
}
.img-wrapper {
    max-height: 100%;
    max-width: 100%;
}
.point {
    background: green;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    position: absolute;
}

Javascript

//For better performance, use some of the plugins here: http://stackoverflow.com/questions/10086693/jquery-resize-on-div-element
var img = $("img.img-responsive");
$(window).resize(function () {
    var wrapperImg = img.parent().find(".img-wrapper");
    if (img.width() !== wrapperImg.width() && img.height() !== wrapperImg.height()) {
        wrapperImg.width(img.width());
        wrapperImg.height(img.height());
    }
});

//http://stackoverflow.com/questions/3588102/jquery-load-not-working-on-my-image#answer-3590761
img.one('load', function () {
    $(this).parent().find(".img-wrapper").css({
        "max-width": this.naturalWidth + "px",
            "max-height": this.naturalHeight + "px",
            "width": this.width + "px",
            "height": this.height + "px"
    });
}).each(function () {
    if (this.complete) $(this).load();
});

make img responsive and fill into a div

3 Answers3

Linked