正方形空间中的图像砌体网格

时间:2018-07-23 21:14:57

标签: html css masonry

如何制作仅包含4张图像的砖石网格,这些图像看起来总是像this

我需要此对齐方式在每个屏幕尺寸上都相同,并始终形成一个正方形。这可能吗?我尝试了许多不同的方法,但似乎无法在所有屏幕尺寸上正常工作。

1 个答案:

答案 0 :(得分:0)

砌体设计用于动态布局。您可能应该使用更适合静态网格的东西,例如CSS Grid。

根据您自己的回答,我使版本更具通用性。它使用容器宽度作为宽高比。对设备宽度的依赖可能会受到限制。

codepen.io/joeflash/pen/wxdomE

.grid-blocks {
  position: relative;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
}