为自动调整大小的 img 保留空间

Question

我希望我的图像的宽度自动调整大小（使用图像纵横比）。我使用类似的东西：

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

问题是在加载图像之前，浏览器不会为其保留水平空间。有没有办法让浏览器在不使用 javascript 的情况下为我的图像保留空间？

我知道图像纵横比以及全尺寸图像的高度和宽度。

Answer 1

不幸的是不是来自前端。在图像加载之前，客户端不知道图像的尺寸。您可以在 img 标签上放置一个最小宽度，如下所示：

img{
    min-width: 100px /*or whatever you expect the 'default' width to do */
}

这将确保（至少）为图像“保留”足够的空间，但如果网站具有响应能力，则可能会导致其他问题，因此需要图像变小。

您唯一真正的选择是在后端获取图像尺寸并将宽度/高度属性传递到标签中，如下所示：

<img src="xyz.jpg" width="100" height="50" >

当然，这些尺寸只是示例！同样，这将限制您在响应式前端，尽管您也可以通过 CSS 设置图像，以便它永远不会溢出其父级的宽度，使用：

img{
    max-width: 100%;
}

如果您使用 PHP，则可以使用getimagesize获取图像尺寸，尽管这会增加服务器的负载。