Question

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

我希望我的图像max-width永远不会超过其实际分辨率，但如果屏幕太宽，我希望宽度为屏幕宽度的90％。我可以为此设置的唯一解决方案是设置width: 90%;，然后为我想要显示的每个图像硬编码max-width，如果我想更改图像，则会出现问题飞行或经常更新。

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

Answer 1

我认为以下内容可能有效。设置max-width: 90%，让图片采用自然宽度（width: auto，默认值）。

请参阅以下示例。

当图像尺寸与包含块的宽度（屏幕尺寸）相同时，存在一个终点（边角情况）。在这种情况下，图像将占据父块宽度的90％。如果您需要100％，则需要jQuery / JavaScript来处理异常。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: