hasLayout.net

Description

Demonstration and tests of proportional image scale with CSS

Date of the Tutorial

Sun Aug 16 11:10:30 2009

Overview

A lot of people seem to wonder about just how to proportionally scale images with CSS; for the image to fit into FOO x BAR container... Thing is, a browser is not a graphics application and CSS isn't a graphics API. What it means is that you can't do that with CSS!

What you CAN do, however, is have the ' element"><img> proportionally scale within one-axis limit. What I mean by that, is that you can make large images smaller and smaller images larger by setting a specified width or max-width while leaving the height to be scaled proportionally to width. Turning it around, you can use the height constrains while leaving the width scale proportionally. You can't have both at the same time.

In this short tutorial, I'll first show you how to do what I just explained and later on will show you some "tests" that fail in proportional image resize.

Proportional Scale of Images Using One Axis

The example shows the scaling using the Y-axis, i.e. image scales according to container's height. The same principle applies for resizing on Y-axis; scaling up to container's width, just never both axis together. Let's have a look:

Original image:

Same image scaled up to the container's height:

Same image scaled down to the container's height:

HTML Code:

<div>
    <img src="/pics/hl_logo.png" alt="" width="95" height="115">
</div>
<div id="scale-up" style="height: 230px">
    <img src="/pics/hl_logo.png" alt="">
</div>
<div id="scale-down" style="height: 57px">
    <img src="/pics/hl_logo.png" alt="">
</div>

CSS Code:

img {
    vertical-align: middle;
    height: 100%;
}
#scale-up {
    height: 230px;
}
#scale-down {
    height: 57px;
}

What do we see here? For those wondering why I am applying vertical-align to the image, read this Images, And Mysterious Gaps page, it's not relevant to image scale. I've set { height: 100%; } on the image for its height to be 100% of container's height, since in the first example (original image) I haven't set any height on the container the image appears at its original size.

An important thing to note here is that I removed the width="" and height="" attributes from ' element"><img> element in the scaling examples. This is necessary as specifying those will prevent the image from being scaled proportionally.

That's pretty much all there is to it. The set height on the container specifies the height of the image - scaling it if necessary - and the width of the image is scaled in proportion; same would happen if we would to swap widths and in the examples.

Various [Failing] Scale Tests

Originally, I wanted to post each of the tests that I was doing right on this page along with the code, but then I decided that it's not worth my time, considering that virtually every method, except for what I've described in this tutorial, fails.

What I did, is I uploaded a all those tests on one page for you to take a look. Read the source, Luke!