Here's the problem. I have an image:
<img alt="alttext" src="filename.jpg"/>
Note no height or width specified.
On certain pages I want to only show a thumbnail. I can't alter the html, so I use the following CSS:
.blog_list div.postbody img { width:75px; }
Which (in most browsers) makes a page of uniformly wide thumbnails, all with preserved aspect ratios.
In IE6 though, the image is only scaled in the dimension specified in the CSS. It retains the 'natural' height.
Here's an example of a pair of pages that illustrate the problem:
I'd be very grateful for all suggestions, but would like to point out that (due to the limitations of the clients chosen platform) I'm looking for something that doesn't involve modifying the html. CSS would also be preferable to javascript.
EDIT: Should mention that the images are of different sizes and aspect ratios.
The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
A common use is to set max-width: 100%; height: auto; so large images don't exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
Crop Image to an Aspect RatioClick Upload an image and select the image you want to crop. Under step 2, click the Fixed Aspect Ratio button, then enter that ratio, such as 5 and 2, and click Change. Drag a rectangle over the image to select the area you want. Move the selection as needed, then click Crop.
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With