html - CSS:将图像的最大宽度设置为其实际像素宽度

Question

我正在尝试响应式布局，并试图让我的图像处理以特定方式运行。

我希望图像的 max-width 永远不会超过其实际分辨率，但是如果对于屏幕来说太宽，我希望宽度为屏幕宽度的 90%。我能想出的唯一解决方案是设置 width: 90%; 然后为我想显示的每个图像硬编码 max-width ，如果我想即时更改图像或经常更新图像，这是有问题的。

我是否可以使用任何 CSS 来描述这种情况，或者我是否必须依靠 javascript 技巧在图像加载完成后根据图像的实际宽度设置 max-width？

Answer 1

我认为以下可能有效。设置 max-width: 90% 并让图像采用其自然宽度(width: auto，默认值)。

请参阅下面的示例。

当图像大小与包含 block 的宽度(屏幕大小)相同时，存在一个终点(极端情况)。在这种情况下，图像将占据父 block 宽度的 90%。如果您需要它是 100%，您将需要 jQuery/JavaScript 来处理异常。

div {
  border: 1px dotted blue;
  margin: 10px 0;
}
div img {
  max-width: 90%;
  vertical-align: top; /* Removes white space below baseline */
}
.ex1 {
  width: 500px;
}
.ex2 {
  width: 400px;
}
.ex3 {
  width: 300px;
}

<div class="ex1">
  <img src="http://placehold.it/400x100">
</div>
<div class="ex2">
  <img src="http://placehold.it/400x110">
</div>
<div class="ex3">
  <img src="http://placehold.it/400x120">
</div>