使用 css 将图像缩放到宽度和高度以进行缩放答案

【问题标题】：Scale image with css to both width and height to scale使用 css 将图像缩放到宽度和高度以进行缩放
【发布时间】：2012-04-14 22:55:10
【问题描述】：

边界框约为 1000x600，部分图片为 500x100，而其他一些是 400x100（极端示例）。现在我想将两者都缩放到边界框能够达到的最大尺寸处理，但要保持规模。

img {
  width: 100%;
  height: 100%;
}

不会保持图像按比例缩放。

【问题讨论】：

您是在问如何将所有图像缩放到容器的大小，同时保持纵横比？

标签： css image

【解决方案1】：

您只能将宽度或高度设置为 100%。例如

img {
    width: 100%;
}

或

img {
    height: 100%;
}

这将保留图像比例，但图像可能会溢出容器。

这可能不适用于所有浏览器，但它适用于最新版本的 Firefox、Chrome 和 Opera。过去我对此有过奇怪的经历，我的解决方案是计算服务器上的新图像大小。

【讨论】：

【解决方案2】：

在阅读此主题 (resize view width, preserve image aspect ratio with CSS) 和 List Apart 文章 (http://alistapart.com/article/fluid-images) 并将它们放在一起之前，我一直对此感到困惑。

如果你的标记是这样的......

<img src="myImg.jpg" />

...然后简单说明

img {
    width:100%
}

应该足够了，因为大多数现代浏览器都意识到大多数人在有选择的情况下都不想改变他们图像的外观。但是，如果您的标记包含维度属性，例如...

<img src="myImg.jpg" width="400" height="400" />

...这意味着更好的技术，然后标记将通过 CSS 发光，将图像保持在固定高度但灵活宽度（呃！）除非你用类似...的东西告诉它。

img {
    width:100%;
    height:inherit;
}

...或...

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

两者似乎都起作用并强制图像恢复正确的方面。

我自己刚刚偶然发现了这个问题（我的 WYSIWIG 编辑器默认为图像添加暗淡 - 我需要一个简单的解决方案，或者我需要花费数小时破解 JCE 来阻止这种行为）并且尚未对其进行详尽的测试但是如果你和我有同样的问题，它应该会给你一个很好的起点。

【讨论】：

这应该是公认的答案，因为它清楚地解释了整个事情以及它为什么起作用。

【解决方案3】：

我不知道是否有办法只使用 CSS。如果你想达到类似this 的效果，那么你可以使用supersized

或者，如果您不关心旧版浏览器，可以查看 CSS3 background-size 属性。具体来说，我认为设置background-size: cover 可以解决问题。

编辑 - 我误解了。您可能真正想要的是background-size: contain，但缺点是您可能必须更改您的 html 标记，而不仅仅是您的 css。

【讨论】：

【解决方案4】：

我认为这篇A List Apart 文章可能对您有很大帮助，它讨论了适应其容器并保持纵横比的响应式图像。

基本上，您只需要包含<img> 并指定该容器的尺寸，而不是将max-width:100% 应用于<img>，它就会适应。阅读本文的其余部分，了解强制性的 IE 考虑事项（谢天谢地 IE7+ 支持它）。

【讨论】：

【解决方案5】：

仅设置宽度或高度并不总是有效，因此您也可以设置：

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

但是

它不会将图像扩展到其原始大小

【讨论】：

【解决方案6】：

你不能那样做。您可以编辑图像元素的width 和height 属性...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" />

您可以将width 和height 设置为像素或百分比。请注意，使用像素时您不必写px，但在使用百分比时您确实必须写%。所以你可以做类似...

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

... 但这将占用父元素的宽度和高度的 100%。因此，请确保您知道父元素是什么以及它的尺寸。

【讨论】：

width 和 height 属性需要在 CSS 像素中指定 - 百分比无效
是的，它们是...w3.org/TR/html4/struct/objects.html#adef-height-IMG：“当对象是图像时，它会被缩放。用户代理应该尽力缩放对象或图像以匹配由指定的宽度和高度作者。请注意，以百分比表示的长度基于当前可用的水平或垂直空间，而不是图像、对象或小程序的自然大小。"

【解决方案7】：

2020 年对此进行了更新。css 属性 object-fit 可用于以 100% 的宽度和高度显示图像，而不会使图像失真。

.wrapper {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

img {
  width: 100%;
  height: 100%;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" />
</div>
↑ default, bad aspect ratio

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="contain" />
</div>
↑ <code>object-fit: contain;</code>

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="cover" />
</div>
↑ <code>object-fit: cover;</code>

【讨论】：