ansaurus

Question

HTML - display an image as large as possible while preserving aspect ratio

Answer 1

+1 A:

Try this:

<img src="whatever.jpeg" width="100%" height="auto" />

Franci Penov 2008-10-02 02:48:36

That works if the page is taller than the image but does not work if the image is taller than the page, so it's not quite solving my problem.

Adam Pierce 2008-10-02 02:53:49

Answer 2

+2 A:

To piggyback on Franci Penov, yes you just want to set one of them. If you have a wide picture, you want to set width to 100% and leave height. If you have a long picture, you want to set height to 100% and leave width.

David Smith 2008-10-02 02:51:27

Answer 3

+5 A:

Here's a quick function that will adjust the height or width to 100% depending on which is bigger. Tested in FF3, IE7 & Chrome

<html>
<head>
<script>
function resizeToMax(id){
    myImage = new Image() 
    var img = document.getElementById(id);
    myImage.src = img.src; 
    if(myImage.width > myImage.height){
     img.style.width = "100%";
    } else {
     img.style.height = "100%";
    }
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>

Wayne 2008-10-02 03:03:19

This code **almost** works except in the case where the image is tall and the window is wide. I have made a small modification to it (which I have added onto the original question) to take the window size into account and it now does what I want. Thank you.

Adam Pierce 2008-10-02 03:20:40

don't you need to set the other aspect to 'auto' for this to work? or is that assumed to be the default?

Steven A. Lowe 2008-10-02 03:25:20

Auto is the default. It's the same as not setting the property.

Wayne 2008-10-02 03:37:30

Answer 4

A:

For this, JavaScript is your friend. What you want to do, is on page load, walk through the dom, and for every image (or alterantively, pass a function an image id if it's just a single image) check if which attribute of the image is greater, it's height or width.

This is the IMAGE itself, not the tag.

Once you got that, then set the corresponding height/width on the tag to 100% and the other to auto

some helpful code--all from off the top of my head, so your mileage may vary on the syntax..

var imgTag = $('myImage'); 
var imgPath = imgTag.src; 
var img = new Image(); 
img.src = imgPath; 
var mywidth = img.width; 
var myheight = img.height;

As an aside, this would be a much easier task on the server side of things. On the server, you could literally change the size of the image that's getting streamed down tot he browser.

Stephen Wrighton 2008-10-02 03:07:46

Answer 5

+2 A:

You don't necessarily want to stretch in a certain direction based on which is bigger. For example, I have a widescreen monitor, so even if it's a wider image than it is tall, stretching it left-to-right may still clip the top and bottom edges off.

You need to calculate the ratio between the window width and height and the image width and height. The smaller one is your controlling axis - the other is dependent. This is true even if both axes are larger than the respective window length.

<script type="text/javascript">
// <![CDATA[
function resizeToMax (id) {
    var img = document.getElementById(id);
    myImage = new Image();
    myImage.src = img.src;
    if (window.innerWidth / myImage.width < window.innerHeight / myImage.height) {
        img.style.width = "100%";
    } else {
        img.style.height = "100%";
    }
}
// ]]>
</script>

Samir Talwar 2008-10-02 03:24:44

ansaurus

tags:

views:

answers:

HTML - display an image as large as possible while preserving aspect ratio

related questions