防止由于图像加载而导致页面回流，同时对所述图像施加最大宽度（仅限HTML/CSS）

我想防止网页上的图像加载导致网页回流

在页面的文本内容已呈现后加载图像时，会发生页面回流。有一个“冲动”所造成的网页回流。它会带来糟糕的用户体验

我的要求是：

• （i） 所有图像都必须完全响应
• （ii）最大宽度为450px（同时保持纵横比）
• （iii）在其容器内居中对齐

页面上可以有多个图像。它们都有不同的纵横比（但缩放到相同的宽度，即450px）。我事先知道它们的尺寸

---

目前我的代码是：

.container{
文本对齐：居中；
溢出：隐藏；
背景：白烟；
边框顶部：1px实心#f0；
边框底部：1px实心#f0；
}
.集装箱img{
宽度：100%；
最大宽度：450像素；
垂直对齐：顶部；
}