我希望我的图像自动调整其宽度(使用图像纵横比)。我使用类似的东西:
img {
height: 100%;
width: auto;
}
问题是在加载图像之前,浏览器不会为其保留水平空间。有没有办法让浏览器在不使用 javascript 的情况下为我的图像保留空间?
我知道图像纵横比以及全尺寸图像的高度和宽度。
我希望我的图像自动调整其宽度(使用图像纵横比)。我使用类似的东西:
img {
height: 100%;
width: auto;
}
问题是在加载图像之前,浏览器不会为其保留水平空间。有没有办法让浏览器在不使用 javascript 的情况下为我的图像保留空间?
我知道图像纵横比以及全尺寸图像的高度和宽度。
实际上,只要您至少知道图像的纵横比,就有一种方法可以做到这一点。
我成功使用的技术包括根据图像的比例为图像周围的包装添加填充。该技术由 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
不幸的是,不是来自前端。在图像加载之前,客户端不知道图像的尺寸。您可以像这样在 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获取图像尺寸,尽管这会增加服务器的负载。