Can you resize image with CSS?

I know that in HTML you could resize images. Can this be done in CSS or can it only be done with HTML? Then i guess the question is whether or not it is a violation of standards to do this.

Thanks!

Actually you can’t “resize” images in HTML. You can make them appear to have been resized, but the actual image does not change size.

Thanks that is want i want to know. Can i make the pictures looked as if they were resized with CSS? And whether it can be done or not, will doing so violate any standards?

thanks!

Not that I’m aware of. CSS can “clip” images so that they don’t break a layout at smaller sizes, while allowing for the image to “roll out” for larger ones.

For example, if you have a container that has a background image with a set height and variable width, (let’s say it’s 1,200 pixels wide and 300 pixels tall), you can position the background image wherever you want (within reason) and have it “roll out” the image for larger users, while hiding the rest for smaller users.


<div id="imageContainer">

</div>


#imageContainer {
    background: url('image.jpg') no-repeat top center;
    height: 300px;
    width: 100%;
}

Hi,

If you set the image width as a percentage in relation to its container then the image will scale with the container and maintain its correct aspect ratio. However whehher it will look any good at those different sizes depends on the images as quality will obviously suffer.

Have a look at this example and close and open the window and the image will scale.

http://www.pmob.co.uk/temp/3col/3col-fixed-side-01.htm

It has nothing to do with standards and is purely to do with the image dimensions.:slight_smile:

It won’t break ‘standards’, I’d say it would break ‘good practice’ though :wink:

Like Dan said, you cannot resize an image unless you’re using SVG images which is pointless at this time due to the lack of support.

‘Mimicking’ image resizing you can do, however, though it’s less a question of standards than it is of visual aesthetics.

You can use a relative unit such as em or percentages to declare the width and height of an image via CSS like so:

img.myimageclass {
 	width: 12em;
 	height: 8em;
 }

And reference your class selector in your HTML document:


 <img src="/path/to/image.png" class="myimageclass" alt="">

This will zoom the image if a user increases/decreases text size.

Like Dan said, you cannot resize an image

I’m not sure what you both mean by that?

As you can see from my example you can resize the image because it is specified in percentage. When you just supply a width in percentage then the aspect ratio of the height is maintained by the browser.

Of course this doesn’t mean that the image is re-sampled or anything like that but it does resize with the browser as the page expanded and contracted.

Of course we may be talking at cross purposes as you both have said the same thing :slight_smile:

Ahhh - Good all4nerds has backed me up :slight_smile:

Resizing in my opinion means that an image itself is of a variable size like vector image formats for example. An image with a fixed size is not a resizable image. Resizing it via CSS is mimicking a variable sized image in my opinion. If you read my example, you’ll see that I, too, offered a solution to resize images in the same manner all4nerds does.

I am getting the feeling what I said is either not read or not understood. I give up. :slight_smile:

Hmm yeah, you guys are talking about 2 different things, one thing is changing the display size, and the other is changing the native size of the image. See what Dan said in the start of this thread.

I’d still say that using HTML/CSS to resize an image is bad practice, I wouldn’t rely on the client browser to do any resizing if you want it to look good.

If you read my example, you’ll see that I, too, offered a solution to resize images in the same manner all4nerds does.

No you are sizing the height and width in ems and when you do that you lose the aspect ratio that is maintained when the image is scaled by the browser.:slight_smile: You must only supply the width if you want the image to scale and maintain the correct aspect ratio. This is an important point that doesn’t seem to be understood correctly.

I am getting the feeling what I said is either not read or not understood. I give up. :slight_smile:

I do understand what you are saying but it doesn’t change the fact that the browser can resize the image. It doen’t resample the image like a paint package or change its resolution etc it just makes it bigger or smaller with varying degrees of success. If you start with a larger better quality image and use it a smaller size then the results can be adequate.

That depends whether you think its good practice to allow users to resize their text and also have images scale accordingly :slight_smile: Some images work better than others and if you want a fluid image as in the example I posted then there is no other cross browser way to do it at present apart from scripting etc.

Some images work well and some look awful its as simple as that.

See Stu Nichols stance on this :slight_smile:

We are talking about 2 different things but you can scale an image with css.

However I have a feeling that the original poster may be talking about background images which is another kettle of fish :slight_smile:

That is exactly what I was trying to convey. To me, enlarging/shrinking an image does not equal resizing an image. It adjusts the display size of the image but not the image itself. But you are right, this is most likely not at all what the original poster meant and my train of thought is headed more in the direction of actual image resizing which has little to do with CSS. :slight_smile:

Thanks for all the information guys.

I’m looking at the links also.