40

Is there a way with CSS or otherwise of making an image fit within an area. Lets say I have multiple images of different sizes and I want them all to fit within a div of 150px by 100px. I don't want to scale the images though as some may be tall and others narrow I simply want them to fit within this area with the rest hidden.

I thought about using overflow:hidden but it appears to not be hidden in IE6.

Any ideas?

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
Walrus
  • 19,801
  • 35
  • 121
  • 199

6 Answers6

41

You should try using this:

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

Edit: Looks like IE6 doesn't support max-width and max-height properties. However, you can implement the workaround given here: max-width, max-height for IE6

Excerpt (in case linked article stops working):

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? “150px”: “auto”);
  height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}
Sang Suantak
  • 5,213
  • 1
  • 27
  • 46
  • 5
    This is simply not correct. How can this be upvoted 17 times? The image is clearly scaled by this, and the original question states that the excess part should be *hidden*. – Torsten Bronger Nov 27 '14 at 21:17
  • 4
    people upvote the answer because we found the question googling for a little different thing, and this just work for our case ;) – robermorales Dec 05 '16 at 19:00
14

When you say "fit within this area" with the rest hidden I feel like you want the image to not be scaled down at all and basically crop off any excess.

I might be interpreting you're question wrong, but try this and see if it produces the effect you're looking for.

.img-holder {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-holder img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}
<div class="img-holder">
  <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>
Ruslan López
  • 4,433
  • 2
  • 26
  • 37
Jimmy Cleveland
  • 141
  • 2
  • Yes and no. What I would like to happen is for it to scale the image until the height of the width (which ever comes first) is that of the container and then crop the remainder. – Walrus Mar 21 '11 at 17:48
12

This won't work in IE6 (as required by the OP), but for completeness you can achieve the required effect on newer browsers using CSS3's background-size:cover and setting the image as a centered background image. Like so:

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}
Dan
  • 614
  • 6
  • 7
12

I know this is an old one, but because I found it in search of answer for the same question, I guess it could be of use for someone else, too.

Since the answers were posted, CSS property object-fit was brought to us. It does exactly what was once requested in the question.

For reference: https://www.w3schools.com/css/css3_object-fit.asp

Georgi Vatsov
  • 428
  • 6
  • 10
7

This worked for me:

img.perfect-fit {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

It tries to do a "perfect fit" of the container, stretching itself to fit the bounds while maintaining image proportion. Haven't tested it with IE6.

JSFiddle: http://jsfiddle.net/4zudggou/

Sheharyar
  • 73,588
  • 21
  • 168
  • 215
7

Hope I am not late to the party ;)

img {
      width:inherit;
      height:inherit;
      object-fit: cover;
}

if however you want the full image to display, use the code below

img {
      width:inherit;
      height:inherit;
      object-fit: contain;
 }

this should do the trick.

N Djel Okoye
  • 950
  • 12
  • 10