gpt4 book ai didi

CSS 高度 :auto starting value?

转载 作者:太空宇宙 更新时间:2023-11-03 18:42:38 24 4
gpt4 key购买 nike

我最近开始向我的图像添加 max-width:100%height:auto 以便浏览器可以在必要时缩小它们以适合屏幕。我发现的唯一缺点是图像将加载到页面上的每个“占位符”空间在图像加载之前似乎有一个 height 为零。这会导致页面元素在页面加载之后但在所有图像加载之前跳来跳去。考虑到 height:auto 的工作原理,这是有道理的,但我想知道是否有人提出了创造性的解决方案来防止它。

最佳答案

如某人所述,一种解决方案是设置 min-height:

.placeholder {
height: auto;
min-height: 140px;
width: 100%;
}

然而,这个问题是它仍然可能会反弹,从 140px 到图像的任何大小,这也意味着你必须拥有的所有图像都必须高于 min-您设置的高度

不幸的是,由于您的问题是在页面加载时出现的,因此您无法使用 JavaScript 动态加载图像并适本地设置其占位符的高度。

可以做的一件事是这样的:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head stuff ... -->
</head>
<body>
<div id="staggerer" style="display: none;">
<!-- Put page content inside this ... -->
</div>

<script type="text/javascript">

window.onload = function() {
document.getElementById('staggerer').style.display = "block";
};

// Or in jQuery:

$(window).load( function() {
$('#staggerer').css('display', 'block');
});

</script>
</body>
</html>

这只会等到所有内容 加载完毕,然后再显示页面内容。如果您的页面需要很长时间才能加载,并且当然依赖于 JavaScript,则此解决方案可能不合适。

关于CSS 高度 :auto starting value?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17207714/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com