css - 宽度/高度百分比显示为拉伸(stretch)的图像

Question

我有大约 15 张图像，一张接一张，格式如下:

<div class="foo">
    <p>
       <a href=""><img src="img.jpg"></a>
    </p>
    <p>
       <a href=""><img src="img.jpg"></a>
    </p>        
    ...
</div>

CSS:

.foo img {
   height: 75%;
   width: 75%;
}

这在我使用过的每个浏览器中都出现过，甚至是一些较旧的 IE 版本，但直到我使用 friend 的 Macbook 时，我才查看该网站并且图像被极度拉伸(stretch)。它是较旧的 OSx 版本 (10.5.8)，但 Chrome 和 Safari 的图像都被拉伸(stretch)了。

我试图让每张图片显示时比实际小 75%。图片大小不一。

是否可以在不手动调整每个图像大小的情况下解决这个问题？

Answer 1

找到答案:

Use only width:100%; on the image and remove height: 100%;. This will tell the browser to resize the image in a way to respect the 100% of the width, or more like, fix your width then stretch your legs.

谢谢你的帮助