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

【问题标题】：How do I make all images of similar size?如何制作所有相似尺寸的图像？
【发布时间】：2015-04-19 15:52:48
【问题描述】：

我正在我的网站上创建一个图库页面，并希望在您向下滚动页面时使用 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 中添加什么？

干杯！

【问题讨论】：

标签： css resize photo

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：