如何按比例缩放图像以适应最大宽度？

Question

在UIWebView中，我使用CSS的max-width属性将大小未知的图像缩放到不大于（但可能小于）300像素宽的空间。一些原始图像较大，另一些则较小。

目前，我正在使用以下CSS声明，它可以正确地缩放宽度，但倾向于在iOS WebView中放大较大图像的高度：

 img{
    max-width:300px;
    margin:10px;
    padding:0px;
 }

所以问题是：如何确保高度与宽度成比例缩放的正确方法？

- Mike Fahy

Answer 1

你想要的是这样的：

  img {
    max-width:300px; 
    height:auto
  }

这与iOS或UIWebView没有任何关系 - 它是纯标准的CSS。

- matt

---

谢谢。我想这可能更普遍，但是为了排除问题是否特定于移动Safari的可能性，我希望消除任何虚假的开始。我编辑了问题，这样其他遇到类似问题的人就可以更容易地找到答案。（顺便说一句，非常好用。谢谢！） - Mike Fahy

唯一的问题就是，如果在页面加载时执行任何JavaScript来检查页面偏移量（height auto），并且使用了惰性或延迟加载图像，则图像加载后可能会更改偏移量。 - Dustin Graham

有点疯狂，但是反过来似乎行不通：{ max-height: 300px; width: auto; }会压缩图像。>:-/ - Stephen R

Answer 2

我没有足够的声望来添加响应的评论，所以我会在这里列出它：

``` img { max-width:300px; height:auto } ```

这行CSS代码适用于Chrome、Firefox和IE，但仅适用于桌面浏览器。如原问题所述，任务是在iOS上设置成比例的图像；在iOS Safari上，这种方法不起作用。

- Ab_c

Answer 3

在 CSS 中，你可以尝试使用百分比代替像素。

- Ellen Tan

Answer 4

我相信第一个答案是正确的 height:100%;

- SivaCoHan