CSS-ISSUE-小缩略图变得巨大-并阻止整个显示

Question

在我的一个网站上，当页面加载时，图像看起来比预期的要大得多(如CSS中所指定的(

我想这可能与图像的大小有关，但没有。我尝试更改"display"属性，但也无济于事。我想这可能是一些与JS相关的调整大小问题，但我真的不知道如何测试它。这些块是由OWL Carousel提供的，但我试图搜索这样的问题，但一无所获。

**谢谢本杰明的回答。该问题是由FOUC引起的，元素的折叠上方渲染。一旦我添加了"；关键CSS"；(它在OWL转盘实际加载之前加载(，问题就解决了。

Answer 1

您正在处理的是一种类似于FOUC(无样式内容的Flash(的东西，尽管您的原因似乎与您的"；猫头鹰旋转木马"；这需要一段时间来初始化，并且您的网站依赖于来获得实际的最终外观。

在Owl Carousel加载之前，您没有任何CSS可以使布局足够接近。如果您将以下CSS应用于它，它会非常接近(至少在桌面上，我没有在移动设备上检查前后的实际外观，但可以通过@media查询进行修改(

.scolumns {
display: flex;
overflow-x: hidden;
}
.scolumns > .column {
width: 248px;
flex-shrink: 0;
padding: 10px;
}

基本上，如果您的最终布局依赖于基于JavaScript的DOM操作，你要么想应用一些CSS，让它先关闭(并且不会影响最终布局，因此上面的Direct Child Combinator：>-你的旋转木马会添加容器，所以它在加载完成后不会影响它"(-要么在父元素上使用某种加载动画，当它完全加载时，你会隐藏它。