Question

我有砌体样式布局 - http://reform.lt，当你向下滚动图像预加载无限滚动时，问题是加载图像时布局会抽搐。这是因为图像没有大小调整，浏览器会在加载相邻图像后进行所有对齐。在我为图像添加宽度和高度后，抽搐停止了。我记录了没有/尺寸的视频 - http://cl.ly/2K1a2B3P0R2Y

style="width: <?php echo $size[0];?>px; height: <?php echo $size[1];?>px;"

没关系，但是图像不再流畅，所以所有的响应都被破坏了。有没有简单的解决方案来解决这个问题？

Answer 1

使用flexbox layout model。你需要更少的代码/ html。

例如，您可以使用一些CSS规则将所有图像放在一个div中，以获得与今天相同的外观。类似的东西：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-end;
}

Answer 2

您可以做的是为图像添加高度和宽度属性，并添加一个类以使其响应：

<img class="img-responsive" src="http://placehold.it/200x200" width="200" height="200" alt="" />

然后在样式表中添加以下css：

.img-responsive {
    max-width: 100%;
    height: auto;      
}

响应式设计中图像的严格px尺寸

2 个答案: