如何制作相似尺寸的所有图像？

Question

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

使用的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

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

＆＃13;

＆＃13;

.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*/
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您想要高度相同的图像

data.table

如果你想要相同的宽度

foo[,2]

.photo img{
    height: 300px;
}

.photo img{
    width: 300px;
}