如何使图片在图库页面（即瓷砖）上均匀对齐？

Question

我试图使图片在div内均匀对齐，div宽度取决于图片宽度，因此它可以适应更宽更薄的屏幕。如何才能做到这一点？到目前为止，我的尝试是：

<style>
.pictures {
width: auto;
border-radius: 30px 0 30px 0;
background: white;
text-align: justify;
}
img {
border-radius: 30px 0 30px 0;
border-style: solid;
border-width: 0 1px 3px 0;
border-color: rgba(0,0,0,1);
height: 199px;
margin: 15px;
}
</style>

...（某些代码对于这个问题来说是多余的）......

<article>
<div class="pictures">
<img src="images/001.jpg">
<img src="images/002.jpg">
<img src="images/003.jpg">
<img src="images/004.jpg">
<img src="images/005.jpg">
</article>
</body>

“width：auto;”好像什么也没做。是否有更好的方法试图让div适合其内容？

Answer 1

您可以在每一行触发text-align:justify，在末尾添加额外的隐形线。 DEMO

.pictures {
    width: auto;
    border-radius: 30px 0 30px 0;
    background: white;
    text-align: justify;
}
.pictures:after {
    content:'';
    display:inline-block;
    width:100%;
}

使用display:flex属性。的 DEMO

.pictures {
  width: auto;
  border-radius: 30px 0 30px 0;
  background: white;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

两个渲染都不会像列那样对齐最后一行。

请参阅列属性的使用：DEMO

.pictures {
width: 100%;
border-radius: 30px 0 30px 0;
background: white;
text-align: justify;
column-width:250px;/* add prefix if needed */
}

Answer 2

使用图像作为背景，您可以非常轻松地完成此任务：

<div style="background-image: url('image1.jpg');"></div>
<div style="background-image: url('image2.jpg');"></div>
<div style="background-image: url('image3.jpg');"></div>

div{
    background-position: center center; /* IE8 support, not required */
    background-position: cover;
    background-size: 100%;
}