如何制作所有大小相似的图像？

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>

Answer 2

如果你想要相同高度的图片

.photo img{
    height: 300px;
}

如果你想要相同的宽度

.photo img{
    width: 300px;
}

.photo{
  text-align: centre;
  overflow: hidden;
  height: 300px;
}

.photo2{
  text-align: centre;
  overflow: hidden;
  max-width:300px;
}

.photo3{
  text-align: centre;
  overflow: hidden;
}

.photo img{
    height: 300px;
}

.photo2 img{
    width: 300px;
}

.photo3{
  overflow:hidden;
  width: 300px;
  height: 100px;
}

i hope this helps you

<!-- remove overflow: hidden; to see where the images actually are and do on the page -->

you see only 1 image because it take the whole height of the div element
<div class="photo">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>
<br>
you see both but they have been scaled too a width of 300px (height automatically scales here)
<div class="photo2">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>
<br>
you see part of a image because it is bigger then the div and the overflow is hidden
<div class="photo3">
  <img src="http://dummyimage.com/600x200"/>
  <img src="http://dummyimage.com/600x200"/>
</div>

如何制作所有大小相似的图像？

How do I make all images of similar size?

css

resize

photo