宽度/高度百分比的图像显示拉伸

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版本，但直到我使用朋友的Macbook，我才查看该网站并且图像是非常伸展。这是一个较旧的OSx版本（10.5.8），但Chrome和Safari都将图像延伸出来。

我试图让每张图片显示比它小75％。图像大小不一。

是否可以在不手动调整每张图片大小的情况下解决此问题？

Answer 1

找到答案：

  

仅使用宽度：100％;在图像上删除高度：100％;这将   告诉浏览器以尊重100％的方式调整图像大小   宽度，或更像是，固定你的宽度，然后伸展你的腿。

感谢您的帮助

Answer 2

你能试试吗，

.foo img {
   min-height: 100px;
   min-width: 100px;
 }