9

边界框约为 1000x600，一些图像为 500x100，而另一些为 400x100（极端示例）。现在我想将两者都放大到边界框能够处理的最大尺寸，但要保持它们的比例。

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

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

4

7 回答 7

8

您可以仅将宽度或仅高度设置为 100%。例如

img {
    width: 100%;
}

或者

img {
    height: 100%;
}

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

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

于 2012-04-14T23:06:02.600 回答
7

直到我阅读了这个线程（调整视图宽度，使用 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 来阻止这种行为）并且尚未对其进行详尽的测试，但它应该给如果你和我有同样的问题，你是一个很好的起点。

于 2013-04-15T12:07:35.413 回答
2

我不知道是否有办法只用 CSS 来做到这一点。如果你想实现这样的 目标，那么你可以使用supersized

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

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

于 2012-04-14T22:58:57.623 回答
1

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

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

于 2012-04-14T23:39:44.053 回答
1

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

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

但

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

于 2016-01-18T14:54:18.643 回答
0

你不能那样做。您可以编辑图像元素的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" />

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

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

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

于 2012-04-14T23:01:47.763 回答
0

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>

于 2020-04-03T07:03:58.910 回答