5

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

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

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

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

4

2 回答 2

2

实际上，只要您至少知道图像的纵横比，就有一种方法可以做到这一点。

我成功使用的技术包括根据图像的比例为图像周围的包装添加填充。该技术由 Thierry Koblentz 介绍（用于视频）并由 Anders M. Andersen 扩展（用于图像）。

<div class="grumpy-image-wrapper">
    <img class="grumpy-image" src="images/grumpy-cat.jpg" />
</div>
<div class="grumpy-image-wrapper">
    <img class="grumpy-image" src="images/grumpy-cat.jpg" />
</div>
<div class="grumpy-image-wrapper">
    <img class="grumpy-image" src="images/grumpy-cat.jpg" />
</div>

.grumpy-image-wrapper {
    width: 90%;
    height: 0;
    padding-bottom: 66.67%; /* determined by image aspect ratio */
    border: 2px solid white;
    position: relative;
}
.grumpy-image {
    width: 100%;
    position: absolute;
}

在此处阅读更多信息：https ://www.andyshora.com/css-image-container-padding-hack.html

于 2013-06-15T20:10:43.743 回答
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获取图像尺寸，尽管这会增加服务器的负载。

于 2013-05-24T13:58:26.423 回答