Fit image inside div without stretching

Question

I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

The images are clipped but not stretched. Instead of using max-width, max-height.

How do I do this?

Mcmurry

Set the image as the background-image of the div? – Enviable

https://mcmap.net/q/515068/-make-image-fill-div-completely-without-stretching Here is css only solution. – Foothold

Answer 1

Those images on the site you linked to are actual size, so the simple answer is just to resize the image.

You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.

Here's the basic idea:

<div><img></div>

If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:

div {
    width:300px;
    height:300px;    
    overflow:hidden;
}
div img {
    min-width:100%;
}

Demo: http://jsfiddle.net/Z47JT/

If you want to clip images (because you expect them to be big) but not enlarge them, try this:

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}

Demo: http://jsfiddle.net/Z47JT/1/

Combine both these techniques if you want.

Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.

Ahq

I think thats what I need, I'll try it out. brb – Mcmurry

Excellent. Welcome to the site! See you around. – Ahq

@WesleyMurch i see that the images are larger than the div. If the image is smaller than the div is there a way to expand it without streching(losing quality) of the image – Gentoo

No, there's no way to increase an image's resolution. If it's small, there's nothing you can do but stretch it. – Ahq

How about for this: #26554263. I want the image to take the shape of it's container to be responsive. – Babylonia

Answer 2

Use the flex box solution

Here is the html,

<div><img /></div>

Add styles

div{
   width:100%;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div img{
  flex-shrink:0;
    -webkit-flex-shrink: 0;
    max-width:70%;
    max-height:90%;
}

Fissi

The above flexbox solution works nicely but won't scale the image up (enlarge it to fit). It only seems to scale the image down from what I've experienced. – Theressathereto

Answer 3

simple way to do this....

.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;

}

Ocrea

Answer 4

We can use .my-class{ object-fit:"cover" }

Studdingsail