'CSS: How to scale an <img> to cover entire parent <div>? [duplicate]

This <img> isn't shrink wrapping as I would expect with min-width:100%

I'm trying to shrink the <img> until either height or width matches the container

Click anywhere in the <iframe> to toggle container shapes

Please try to edit the <img> CSS:

MAINTAIN ASPECT RATIO
COVER ENTIRE SURFACE AREA OF CONTAINER DIV
ONLY EDIT THE IMAGE

My question is specifically: scale an <img> to maintain aspect ratio but cover the entire surface of parent <div> even as the parent <div> resizes.

Maybe I could somehow use css flex box-layout or something? Maybe a transform?

Solution 1:^[1]

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

Solution 2:^[2]

If you don't want to touch the container, put the background on the <img>

#img { 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

You can set HTML source to a transparent base64 pixel (credit CSS Tricks)

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

http://jsfiddle.net/Log82brL/17/

Solution 3:^[3]

You can use CSS background instead of HTML img.

.myDiv
{
  height: 400px;
  width: 300px;
  background-image: url('image-url.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #000000;
}

<div class="myDiv">
</div>

Here is the JS Fiddle Demo.
Try to change height and width - you will see that image stretches to fill the div.

You can also different background-size values:

Proportional stretch to contain: background-size: contain;
Too tall div
Too wide div
Proportional stretch to fill: background-size: cover;
Too tall div
Too wide div
Stretch to fill 100%: background-size: 100% 100%;
Too tall div
Too wide div

Solution 4:^[4]

Did u try the bootstrap solution

http://getbootstrap.com/css/#images-responsive

which is pretty much

.img-responsive
{
max-width: 100%;
height: auto; 
display: block;
}

Adding to your update question

http://jsfiddle.net/arunzo/Log82brL/5/

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

And still i am unsure what is that you seek, sorry for the jerky animation.

Solution 5:^[5]

use single css background shorthand property

.myDiv
{
  height: 400px;/*whatever you want*/
  width: 300px;/*whatever you want*/
  background: url('image-url.png') no-repeat center center;
  background-size: contain;
}

<div class="myDiv">
</div>

Solution 6:^[6]

Updated answer. Now works as intended.

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

#container {
    overflow: hidden;
    width: 400px;
    height: 200px;
    transition: all .5s;
    margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
    width: 200px;
    height:600px;
}
#img {
    height: auto;
    left: 50%;
    margin: auto;
    min-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%); /* changed to 2d translate */
    width: 100%; /* full width in wide mode */
}

#container.skinny #img {
    width: auto; /* width reset in tall mode */
}

<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

Solution 7:^[7]

A while back I found a jQuery solution called backstretch. Now this looks possible with CSS3; from the linked page:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Solution 8:^[8]

http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div

contained AND centered

I think this is the rendering you're trying to get, this might help ;)

https://jsfiddle.net/erq1otL4/

<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>   

#container.skinny {
width: 400px;
height:600px;
}
#container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-color:pink;
    background-position: center center;
}

var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

Solution 9:^[9]

Usually to achieve that you need to use:

parentdiv img {
   width:100%;
   height:auto;}

in order to make your image resize with the parent div.

This can cause some cropping issues (visually) if you set the overflow to hidden.

Solution 10:^[10]

Try this:

<div class="img_container">
   <img src="image/yourimage.jpg" alt="" />
</div>

<style type="text/css">
   .img_container{
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
   .img_container img{
       width: 100%;
       height: auto;
     }
 </style>

setting the height or the with auto will not make the image look stretched.

Solution 11:^[11]

Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both

Solution 12:^[12]

Here is a very simple CSS solution that does not require changing the attributes of an img tag.

div{
            background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
            height: auto;
            width: 400px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	2ne
Solution 2	neaumusic
Solution 3
Solution 4
Solution 5	Akhilesh Kumar
Solution 6
Solution 7	berto
Solution 8
Solution 9	Pierre Irani
Solution 10	dianne_ldrs
Solution 11	Shashank
Solution 12	rassa45

'CSS: How to scale an <img> to cover entire parent <div>? [duplicate]

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]