为汽车大小的img预留空间

Question

我希望我的图像的宽度自动调整（使用图像宽高比）。我用的是：

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

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

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

Answer 1

实际上有一种方法可以做到这一点，只要你至少知道图像的宽高比。

我成功使用的技术包括根据图像的比例在图像周围添加填充到包装器。这种技术由Thierry Koblentz引入（用于视频），并由Anders M. Andersen扩展（用于图像）。

在此处阅读更多内容：http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

Answer 2

不幸的是不是来自前端。在图像加载之前，客户端不知道图像的尺寸。你可以在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获取图片尺寸，但这会增加服务器的负担。