Make Img Responsive And Fill Into A Div

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. 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:

<divclass="wrapper"></div>

Demo

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-wrapperimg {
    height: 100%;
}

HTML:

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

Demo

Solution 2:

Try this if you are trying to make your image responsive

<divstyle="width:40%; height: 80%; background: red;"><imgsrc="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.

Solution 3:

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

<divclass="container"><imgsrc="//placehold.it/200x300"class="img-responsive centered" /><divclass="img-wrapper centered"><divclass="point"style="bottom: 0%; right: 0%;"></div><divclass="point"style="top: 0%; right: 0%;"></div><divclass="point"style="top: 0%; left: 0%;"></div><divclass="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-elementvar 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();
});

Share