Question

在我的网站上，我的图片宽度为720像素。我希望图像是页面宽度的95％（最大宽度：95％），如果页面宽度太大，则需要720px。因此，在较大的屏幕上，我不想让它们爆炸。有没有办法在CSS中实现这一点？

Answer 1

您可以指定width和max-width。元素将遵循宽度，或者如果max-width较小则收缩。

the MDN上描述了此行为。

它可以防止width属性的使用值变大而不是为max-width指定的值。

＆＃13;

img {
  background-color: grey;
  border: 1px solid blue;
  width: 400px; /* Ideal width */
  max-width: 80%; /* Max width */
  }

＆＃13;

<img src="http://placehold.it/400x400">

＆＃13;

请注意，如其他答案所示，您可以将width设置为百分比，将max-width设置为像素。最终结果是相同的：图像的计算宽度变为两者中的最小值。

对我而言，以像素为单位指定宽度在语义上更有意义。毕竟，你想拥有一个像素宽的图像（与图像本身相关），并希望对较小屏幕的百分比有约束。但如果你反过来写它，我就不会反对你。 ; - ）

Answer 2

GolezTrol几乎是正确的，但max-width和width值的方向错误。

以下是您需要的正确元素集。

＆＃13;

img {
  width: 95%; /* Ideal width */
  max-width: 720px; /* Max width */
  }

＆＃13;

<img src="http://placehold.it/800x800">

＆＃13;