26

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one dimension:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
max-width: 100%;
height: auto;
}

The proportions should stay the same. Essentially, wide images should be cut off in width, while high images need to be cut off in height. So just zooming in as much as is needed to fill the container.

Not sure why I can't get it to work, do I need JavaScript for this?

Edit: To be clear. I need everything red on the fiddle gone. The images coming in are dynamic, therefore I can't use background-images. I'm open to using JavaScript. Thanks! :)

8
  • not sure about cross browser support - jsfiddle.net/HsE6H/2 Commented May 24, 2013 at 16:51
  • Sorry, might not have been clear: I need the image to fill the whole div, so that all the "red" disappears. Any ideas? :)
    – Lennart
    Commented May 24, 2013 at 16:53
  • 1
    You will not be able to take "large images of varying dimensions" and perfectly fit them to a container of fixed dimensions without scaling the two axes at separate ratios. If you scale an image proportionately, then the proportions of the source will be the same as the target. Commented May 24, 2013 at 17:02
  • Like Blaise Swanwick said it's not possible only by css you need to resize images using some server side code and image manipulation library.
    – The Alpha
    Commented May 24, 2013 at 17:12
  • Any ideas how to go about that? Very open to solutions involving JS.
    – Lennart
    Commented May 24, 2013 at 17:14

13 Answers 13

43
+50

Auto-sizing Images to Fit a Div - Making the CSS Work

Here is one way of doing it, start with the following HTML:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

and the CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

and the demo fiddle: http://jsfiddle.net/audetwebdesign/QEpJH/

When you have an image oriented as a portrait, you need to scale the width to 100%. Conversely, when the image is landscape oriented, you need to scale the height.

Unfortunately, there is no combination of selectors in CSS that targets the aspect ratio of the image, so you can't use CSS to pick out the correct scaling.

In addition, you have no easy way of centering the image since the top left corner of the image is pinned to the top left corner of the containing block.

jQuery Helper

You can use the following jQuery action to determine which class to set based on the aspect ratio of the image.

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

For each image in .container, get the height and width, test if width<height and then set the appropriate class.

Also, I added a check to take into account the aspect ratio of the containing block. Before, I had implicitly assumed a square view panel.

6
  • Hi. Thanks, this is working very well - great explanation, too!
    – Lennart
    Commented May 24, 2013 at 18:00
  • Glad to help! You can embellish the jQuery to center the image if you need to.
    – Marc Audet
    Commented May 24, 2013 at 18:01
  • However, the dimensions of the div are 240x300, so the simple imgW < imgH doesn't work if an image is e.g. 250x300. It should be landscape in this case, but is already handled as a portrait image. Any way to include the 4:5 ratio in that JS?
    – Lennart
    Commented May 24, 2013 at 18:04
  • 1
    I extended the jQuery code to account for the aspect ratio of the view panel.
    – Marc Audet
    Commented May 24, 2013 at 18:25
  • @User One of the images is broken, is that the problem you are seeing?
    – Marc Audet
    Commented Nov 29, 2015 at 15:46
5

For anyone looking to do this that doesn't have dynamic images, here's an all-CSS solution using background-image.

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

The "background-size: cover" makes it so that the image scales to cover all of the div while maintaining the aspect ratio. The CSS could also be moved to a CSS file. Although if it's dynamically generated, the background-image property will have to stay in the style attribute.

3

Taking out the line: max-width:100% in your CSS file seems to do the trick.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Also you can add > to your closing div in your HTML file could make the code neater.

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/

1
  • Yeah, the placeholder images are a bit misleading there. This just makes the images full size, while I would like them to be as small as possible while still filling the whole container.
    – Lennart
    Commented May 24, 2013 at 17:10
3

Here is another solution I found, that no need to seperate portraid or landscape or scripting.

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

Here it is, it works well...

https://jsfiddle.net/efirat/17bopn2q/2/

2
  • 1
    Just the solution I was looking for. Shame it does not answer the question above. I think they wanted to fill the container completely, even if part of the image gets cropped. So the blue areas should not be visible.
    – jumxozizi
    Commented Jul 30, 2017 at 11:25
  • @Rubiksmomo sorry, I have just canalize my own problem, you are right. Question is different, but, this code also work for others... Thank you.
    – efirat
    Commented Aug 1, 2017 at 6:49
2

Background can do this

  1. set image as background

2.

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

or

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
3
  • 1
    Thank you sir! I can't believe nobody upped this.. here is a test: jsfiddle.net/yrrncees/8
    – Alex
    Commented Mar 4, 2016 at 17:07
  • Worth noting that when using this solution, it's a good idea to include a hidden version of the image within the div for accessibilities sake. That way you can set the alt tag, and users with CSS disabled can still view the site and see the images. If doing this it's better to avoid display: none as some screen readers will skip over elements with those styles.
    – kravse
    Commented Mar 7, 2016 at 16:35
  • Just a note as of 2017/Sep background-image do not print, in chrome you can set a style to get them to print but in other browsers not so. Commented Sep 5, 2017 at 2:17
2

You should try this:

img {
    min-width:100%;
    min-height:100%;
}
1
  • This is good for a short fix, but large images aren't scaled down appropriately.
    – byxor
    Commented Jun 30, 2019 at 1:50
2

I used this plugin that accounts for any ratio. It also requires imagesloaded plugin to work. This would be useful for numerous images across a site needing this treatment. Simple to initiate too.

https://github.com/johnpolacek/imagefill.js/

2

It works if you add the following to the parent div for img styling; https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
0

This could do the job:

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}
1
  • Nope, it changes the proportions.
    – Lennart
    Commented May 24, 2013 at 17:09
0

We went down the path with an Angular app of using a variation on the jQuery approach above. Then one of our bright colleagues came up with a pure CSS approach. See this example here: https://jsfiddle.net/jeffturner/yrrncees/1/.

Basically using line-height solved the problem for us. For those not wanting to hit the fiddle, the code fragments are:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

The key is in using line-height and setting the container to do the same.

1
  • OP (and me in fact) is looking for a solution where the image fills the div without leaving background whitespace. Unfortunately this doesn't do that.
    – Daryl Teo
    Commented Jun 16, 2015 at 12:44
0

I came across this topic because I was trying to solve a similar problem. Then a lightbulb went off in my head and I couldn't believe it worked because it was so simple and so obvious.

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
min-width:100%;
min-height:100%;
}

Just set the min-width and min-height to 100% and it will always automatically resize to fit the div, cutting off the excess image. No muss no fuss.

0
0

Using an image as Div background has many disadvantages (like missing ALT for SEO). Instead of it, use object-fit: cover; in the image tag style!

0

The following solution is very short and clean if you need to insert img tag into div tag:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

Also, if you don't need to use a div you can just write an even shorter css:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.