css - 如何使所有图像尺寸相似？

Question

我正在我的网站上制作一个图库页面，并希望在向下滚动页面时使用 CSS 使所有图像具有相同的分辨率，就像 Vice 照片文章一样。

我使用的 HTML 看起来像

<div class="photo">
<img src="album images/Test Album/img1.jpg">
<br>
<img src="album images/Test Album/img2.jpg">
</div>

我必须在 .Photo { CSS 中添加什么才能使所有图像居中且大小相同？

干杯!

Answer 1

不确定我是否正确理解了这个问题，但请看如下。

.photo {
    text-align: center; /*for centering images inside*/
}
.photo img {
    width: 300px; /*set the width or max-width*/
    height: auto; /*this makes sure to maintain the aspect ratio*/
}

<div class="photo">
    <img src="http://dummyimage.com/600x200"/>
    <br/>
    <img src="http://dummyimage.com/500x200"/>
</div>