Scale image with css to both width and height to scale

Question

The bounding box is approx 1000x600, and some images are 500x100, while some others are 400x100 (extreme examples). Now I\'d like to scale both up to the maximum size the bo

Answer 1

I was having difficulty with this until I read this thread (resize view width, preserve image aspect ratio with CSS), and the List Apart article (http://alistapart.com/article/fluid-images) and put it all together.

If your markup is like this...

<img src="myImg.jpg" />

...then simply stating

img {
    width:100%
}

should be enough because most modern browsers realise that most people, given a choice, don't want to change the aspect of their images. However, if your markup contains dimension attributes like...

<img src="myImg.jpg" width="400" height="400" />   

...which, is meant to be better technique, then the markup will shine through the CSS keeping the image at fixed height but flexible width (urgh!) unless you tell it otherwise with something like...

img {
    width:100%;
    height:inherit;
}

...or...

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

Both seem to work and force the image back into correct aspect.

I've just stumbled upon this problem myself (my WYSIWIG editor adds dims to images by default - I needed a simple solution or I needed to spend hours hacking JCE to stop this behaviour) and haven't yet tested it exhaustively but it should give you a good starting point if you're having the same issue as me.

Answer 2

Setting only width or height doesn't always work, so alternatively you can set:

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

BUT

it will not extend images over their original size

Answer 3

You can't do it like that. You can edit the image element's width and height attributes...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" /> 

You can set the width and height to either pixels or percent. Note that you don't have to write px when using pixels, but you do have to write % when doing percentage. So you can do something like...

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

... but that will take 100% of the width and height of the parent element. So be sure you know what the parent element is and its dimensions.

Answer 4

You can set only width or only height to 100%. E.g.

img {
    width: 100%;
}

or

img {
    height: 100%;
}

That will preserve the image scale, but the image might overflow the container.

This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.

Answer 5

An update to this in 2020. The css property object-fit can be used to display an image at 100% width and height without distorting it.

.wrapper {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

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

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" />
</div>
↑ default, bad aspect ratio

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="contain" />
</div>
↑ <code>object-fit: contain;</code>

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="cover" />
</div>
↑ <code>object-fit: cover;</code>

Answer 6

I think this A List Apart article may help you greatly, it discusses responsive images that adapt to their container, maintaining aspect ratio.

Essentially you just need to contain the <img> and specify dimensions for that container than apply max-width:100% to the <img> and it will adapt. Read the rest of the article for obligitary IE considerations (thankfully IE7+ supports it).