使用CSS等比例调整图像大小？

Question

是否有一种仅使用CSS就可以按比例调整（缩小）图像大小的方法？

我正在使用JavaScript的方法，但只是想看看是否可以使用CSS实现。

- codingbear

---

Ethan Marcotte最近非常彻底地调查了这个问题。简短的答案是可以，但并非所有浏览器都支持。 - Mark Hurd

如果您不想浪费带宽，那么 slimmage.js 可以提供帮助；它读取结果 max-width 的值来确定请求哪个尺寸的图片。 - Lilith River

您可以仅设置图像的宽度，高度将自动调整。 - Rik Telner

Answer 1

使用CSS等比例调整图像大小：

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

- Mkk

---

即使img标签有高度和宽度属性，这个方法仍然适用。+1 - Surreal Dreams

如果需要，您也可以使用max-width代替width。关键是要使用height:auto来覆盖已经存在于图片中的任何height="..."属性。 - Phrogz

在我的情况下，我使用了固定的高度，并将宽度设置为自动 :) 谢谢！ - KarenAnne

常见用法是设置max-width: 100%; height: auto;，以防大型图片超过其容器宽度。 - OdraEncoded

如果您想要放大图片，这种方法就行不通了。图片将失去其长宽比。当然，除非容器具有与图像相同的长宽比。 - GetFree

Answer 2

控制尺寸并保持比例：

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

- Cherif

---

问题在于并非所有浏览器都能解释max-width和max-height，比如IE，对吧？ - alexserver

@alexserver 它适用于 MSIE >= 7：http://www.cssportal.com/css-properties/max-width.php - gouessej

这个答案比较好...你可以设置最大宽度和高度，同时保持纵横比。 - olivarra1

没错，这是正确答案，因为它考虑了图片方向（即横向还是纵向）。谢谢！ - katamayros

最佳答案！ - Udit Pandya

Answer 3

如果它是一个背景图片，使用background-size: contain。

示例 CSS：

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}

- lenooh

---

或者使用background-size: cover;，它会覆盖整个区域。 - Turion

background-size:contain; 对我有效。 - jasonleonhard

还要添加所需的宽度和高度=100%。 - Guy Lowe

@Turion 太棒了，谢谢，完美地解决了由于 max-width: 300px; 导致的缩放问题。 - Underverse

Answer 4

尝试

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);

- orome

---

如果你需要按比例缩小每张图片，这个方法非常有效。使用这段代码可以让图片变为原图的一半大小。但是，使用此解决方案后，图片仍会占用同样的空间。 - Mārtiņš Briedis

@MārtiņšBriedis：这不就是重点吗？有没有一种方法可以仅使用CSS来使服务器上的图像占用更少的空间（请参见OP）？！ - orome

不是那种空间。图像在文档中仍然具有相同的边界、宽度和高度，只是它们“看起来”小了两倍。想象一下，一个尺寸为100x100的图像。然后应用scale(0.5)，它就相当于一个50x50的图像，但是两边有不可见的25像素边框。图像仍将占据100x100的空间。 - Mārtiņš Briedis

@MārtiņšBriedis：嗯，我得试试看。已经有一段时间了，但它似乎做到了想要的事情。 - orome

这是一个给你的 jsfiddle 链接：http://jsfiddle.net/oy6t2xgL/ - Mārtiņš Briedis

Answer 5

您可以使用 object-fit 属性：

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

这将适应图片的大小，而不改变其比例。

- Andrii Bogachenko

---

我使用了宽度100％和高度100％，并且还使用了object-fit：contain。它的效果非常好：）。而且，object-fit：contain的解决方案非常简单。 - Faris Rayhan

请注意浏览器支持：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit 目前不支持IE和Android 4.4.4+。 - qix

object-fit 的效果很好 - 只是似乎需要同时设置 height 和 width 或者同时设置 max-height 和 max-width 才能避免图片在任何方向上溢出容器。 - tschumann

Answer 6

请注意，width:50% 将图片调整为可用空间的50％，而 max-width:50% 将图片调整为其自然大小的50％。在使用这些规则进行移动端网页设计时，这一点非常重要，因此对于移动端网页设计，应始终使用max-width。

更新：这可能是旧版Firefox的一个bug，现在已经修复了。

- andreszs

---

在桌面端看起来好像并不是这样的：http://jsfiddle.net/nLh1oh5e/ - Campbeln

这对我来说也不是这种情况。 - jasonleonhard

感谢你指出这件事，它有很大的影响（至少我注意到了）。 - contactmatt

没错，谢谢。但是你如何处理图像的大小包装器？它仍然像图像是100%宽度一样运作，而不是50%，导致不必要的边框。我希望它可以紧密地适应缩小后的图像。 - Micros

这种方法的问题在于 max-width 与图像的原始尺寸无关。max-width 的 50% 意味着“相对于包含块宽度的 50% ”。（关于 width 的文档） - rinogo

Answer 7

保持图像纵横比例缩放的方法：

可以尝试以下操作：

img {
  max-width:100%;
  height:auto;
}

- Prasanth K C

Answer 8

2015年重新审视：

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

我重新审视了这个问题，因为现在所有常见的浏览器都有Cherif提到的工作自动建议，所以这样做效果更好，因为你不需要知道图像是宽还是高。

旧版本： 如果你受到例如120x100的盒子的限制，你可以这样做

<img src="http://image.url" height="100" style="max-width: 120px">

- PetrV

Answer 9

<img style="width: 50%;" src="..." />

这对我来说完全有效...或者我错过了什么？

编辑：但请注意Shawn提到的意外升级的问题。

- Adrien

---

抱歉，我喜欢将网站的内容和设计分开。 我完全知道添加宽度规则是有效的，这也是我最初使用的。谢谢 :) - codingbear

由于某种原因，这是我唯一有效的选项。谢谢 :) - Mano Haran

Answer 10

css属性max-width和max-height效果很好，但不被IE6和我想是IE7支持。您应该使用这个属性替代height/width，这样可以避免意外放大图像。您只需要按比例限制最大高度/宽度即可。

- Shawn

---

当针对支持HTML5的浏览器时，这似乎是最好的方法。 - Nestor

它适用于MSIE >= 7：http://www.cssportal.com/css-properties/max-width.php - gouessej

我很高兴旧版IE浏览器的事情正在变得不相关。 - Aran Mulholland