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 回答