图像在第一次加载时呈现，显示其原始高度和宽度，而不是为此应用提到的 css

Question

我需要确保某些图像在浏览器开始渲染时立即应用了特定的宽度（使用 CSS 类）。

目前，在带宽有限的网络上，图像显示其原始高度和宽度，不会立即应用定义的CSS规则。设置max-height和width没有帮助。

.image-container{
  max-width: 100%;
  height: auto;
  display: block;
}

<img src='https://upload.wikimedia.org/wikipedia/commons/7/74/Earth_poster_large.jpg' />

Answer 1

您没有设置宽度，只是设置最大宽度，因此如果包含元素比原始图像宽，则不会更改任何内容。尝试将max-width: 100%;更改为width: 100%;

Answer 2

是的，有一些解决方案。

我们可以在渲染时降低该图像的重要性，这样我们的初始 css 就不会应用于更快的渲染。

<img src="xyz.png" importance="low">

其次，我们正在申请 css 类display:none组件，加载。一旦我们的 API 被解析并删除了加载器，样式将是类 display:block .

确保你的hideComponent类名应该在main.css中。