Force image to layer size

Can this be done?

[hannamyluv]

Is there a way to force an image to resize to a layer's dimentions without putting a height or width attribute in the img tag?

I have several images of different sizes that I am dropping into a template and some are wider than others and some are taller than others. I just want the tall or wide ones to resize to the layer size rather than pushing the layer out overtop of other elements on the page.

[Robin_reala]

Put this in your CSS?

img { width: 100%; }

Althoug that'll only do width or height, not both (it'll stretch if you do both. Maybe:

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

[iamlost]

Yes.

The main concerns are that you are forcing the shape and size which may cause distortion and blurring, i.e. a stock 100x100px image will look mis-shapen at 200x300px and the pixels may be apparent/blur at 1000x1000px.

CSS:

* {padding: 0; margin: 0;
}
#big {width: 200px; height: 300px; border: 2px #f00 solid;
}
#small {width: 100px; height: 100px; border: 2px #f00 solid;
}
#big img, #small img {width: 100%; height: 100%; vertical-align: bottom; /* for IE */}

HTML:

<div id="small">
<img src="test.jpg" alt="" />
</div>
<div id="big">
<img src="test.jpg" alt="" />
</div>

[hannamyluv]

Well, that almost fixes the problem. I am more looking for it to kick in only if the image is bigger than the layer.

For example, let's say the layer's width is 100px. One image is 65px wide and the other is 120px. I would like the one that is 65px wide to display as is, while the one that is 120px wide to display at only the 100px wide the layer is.

If I can do this, I don't mind distortion on the second image as they only make up a small percentage of the images.

[iamlost]

Robin_reala's solution (max-width/height) either squeezes the image in one or both dimensions or expands to stock size and stops leaving unfilled div in one or both dimensions. Plus for IE you would have to add a .htc script.

You could make the containing div larger than any image (i.e. if largest image width is 400px and largest height is 500px make div that size) and center images within it. It requires a script to dynamically calculate each image's dimensions and margins and is a pain but is possible.

Alternatively if you are able to dynamically change your CSS file contents (and force reload) you can put the image in the div as: #div {background: url(test.jpg) no-repeat center center;} with again the div's width/height at least the size of the largest corresponding image dimension.

I just like to float images and let the other stuff work around them but that may not be feasible in your case.

I would love a simple answer myself :-)
Anyone?

[iamlost]

Our posts crossed in the ether ...

I am more looking for it to kick in only if the image is bigger than the layer.

I can't think how to work that without scripting. See previous post.

Normally not worth the effort, especially if most images can work within the specified div size and ratio (width-height). Unless you can ignore IE or don't mind adding a .htc file ... in which case max-height/width works fine.

[Farix]

Another, more sampler solution would be to scale the images to fit into the box using an image editor. Then you don't have all that extra muck in your code to deal with images larger then the size of your allowed boxes because you won't have any images larger then the boxes to begin with.