How to Preserve Aspect Ratio When Scaling Image Using One (Css) Dimension in IE6

How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

Adam Luter gave me the idea for this, but it actually turned out to be really simple:

img {
  width:  75px;
  height: auto;
}

IE6 now scales the image fine and this seems to be what all the other browsers use by default.

Thanks for both the answers though!

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

HTML/IE: stretch image to fit, preserve aspect ratio

If you want to preserve aspect ratio, you only need to specify one dimension ie:

<img src="file://[filename]" width="100%" alt="Sample Image" />

You can use javascript to determine max dimension and resize accordingly

<script type="text/javascript">
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
</script>

ie6 image stretch and scale

There is a way for CSS 3 to do this but since IE6 does not support it, I think your best bet is to use the img tag.

e.g.

<img src="../images/jigsaw_logo.png" style="width: 100%; position: absolute; top: 0; left: 0; z-index: -1;"/>

This will retain the proportion of your image and move it back.

Also take note that in IE's css, you can specify expressions, so try the one below if you're having trouble with the normal 100% css width:

width: expression(document.body.clientWidth + 'px');

Full page div, fit image to smaller dimension (preserve aspect ratio)?

Just switch the background-size to contain instead of cover JS Fiddle

#background {
    background-size: contain;

---

** Note that if you want to get rid of the few white pixel margin around on your page top, right, bottom and left sides add this to your body css:

    padding:0;
    margin:0;

How do I retain the aspect ratio of an image if its dimensions are percentages?

Just add height: auto.. Thus:

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

Then the height adjusts itself according to the width.

Preserve image aspect ratio with the height fixed

What I would like to do is to keep the height of the image at 18px and have the width be whatever fits the aspect ratio.

This does what you want:

img { 
    height: 18px;
}

See demo here.

Keep in mind, max-heigth can be used instead of height if you want to keep small images small.

---

Related Topics