Question

通常说，最好在img的HTML属性width和height中指定图片大小。这样浏览器就可以为尚未加载的图像保留空间，这样一旦加载，它们就不会通过使页面布局下方的内容在显示时跳转来更改页面布局。（我很遗憾地说我不知道这项技术的名称是什么，所以我真的不知道如何专门搜索这个问题，因此这个问题）

我想知道在响应式布局中如何解决这个问题？我知道在大型桌面浏览器上，我的新闻文章的图片可能是400x300像素，但我不能把它放到我的文档中，如：

<img src="/thumbs/article_image_400_300.jpg" width="400" height="300"/>

因为在较小的浏览器上，我也希望我的图像更小。但是如果可能的话，我仍然希望保留这种保留空间的行为。

可以这样做吗？

Answer 1

将height和width属性放入HTML中，显示正在使用的图像文件的实际大小。

然后将其添加到CSS中，以在保持纵横比的同时使图像响应缩放：

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

现在，为媒体查询中的每个断点设置所需的图像宽度，以父元素宽度的百分比表示。

例如：

img.medium {
  width: 60%;
}

img.small {
  width: 30%;
}

CSS中设置的宽度将覆盖HTML中的宽度。

响应式设计中的HTML图像宽度和高度属性

1 个答案: