CODEWITHSUNDEEP
javascripthtmlcssimage
Lennart
Lennart

Reputation: 327

Make image fill div completely without stretching

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! :)

Upvotes: 26

Views: 98329

Answers (13)

willy wonka
willy wonka

Reputation: 1686

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;
    }

Upvotes: 0

efirat
efirat

Reputation: 3867

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/

Upvotes: 3

CodingSince007
CodingSince007

Reputation: 13

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;
}

Upvotes: 2

Mehdi Saghari
Mehdi Saghari

Reputation: 164

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!

Upvotes: 0

outendesigns
outendesigns

Reputation: 9

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.

Upvotes: 0

Jeff Turner
Jeff Turner

Reputation: 1

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.

Upvotes: 0

BurningLights
BurningLights

Reputation: 2397

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.

Upvotes: 5

sledgeweight
sledgeweight

Reputation: 8115

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/

Upvotes: 2

user3710425
user3710425

Reputation: 21

You should try this: 

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

Upvotes: 2

Tim Kozak
Tim Kozak

Reputation: 4182

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;
}

Upvotes: 2

Marc Audet
Marc Audet

Reputation: 46825

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.

Upvotes: 43

Jcpopp
Jcpopp

Reputation: 149

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/

Upvotes: 3

SAST
SAST

Reputation: 11

This could do the job:

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

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

Upvotes: 0

Related Questions