在IE6中使用一个（CSS）维度缩放图像时如何保留宽高比？ [英] How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

问题描述

这里是问题。我有一个图片：

 < img alt =alttextsrc =filename.jpg/& 
  

注意没有指定高度或宽度。

在某些页面上，我只想显示缩略图。我不能改变html，所以我使用下面的CSS：

  .blog_list div.postbody img {width：75px; } 
 

哪些（在大多数浏览器中）制作一张均匀宽的缩略图的页面，

然而，在IE6中，图像仅在CSS中指定的维度中缩放。

这是一个说明问题的页面示例：

• 列表应显示缩略图


• 一篇博文，其中显示

我非常感谢所有建议，但是想指出由于客户选择的平台的限制）我在寻找不涉及修改html的东西。 CSS也比JavaScript更好。

编辑：应该提到图像的大小和宽高比不同。

>

Adam Luter给了我这个想法，但实际上真的很简单：

  img {
 width：75px; 
 height：auto; 
} 
  

IE6现在缩放图片，这似乎是所有其他浏览器

感谢您的答案！

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:

• The list, which should show thumbnails
• A single blog post, which shows the full-size image.

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.

解决方案

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!

这篇关于在IE6中使用一个（CSS）维度缩放图像时如何保留宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！