CSS 如何制作所有大小相似的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29732117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make all images of similar size?
提问by Lewis James
I'm making a gallery page on my site and want to use CSS to make all the images the same resolution when you scroll down the page, like a Vice photo article.
我正在我的网站上制作一个画廊页面，并希望在向下滚动页面时使用 CSS 使所有图像具有相同的分辨率，就像副照片文章一样。
The HTML i'm using will look like
我正在使用的 HTML 看起来像
<div class="photo">
<img src="album images/Test Album/img1.jpg">
<br>
<img src="album images/Test Album/img2.jpg">
</div>
What do I have to put in my .Photo { CSS in order to make all the images centered and the same size?
我必须在我的 .Photo { CSS 中放入什么才能使所有图像居中且大小相同？
Cheers!
干杯!
采纳答案by Stickers
Not sure if I understood the question correctly, but take a look of this as follows.
不确定我是否正确理解了这个问题，但请看下面的内容。
.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>回答by Pizza lord
if you want images with the same height
如果您想要具有相同高度的图像
.photo img{
height: 300px;
}
if you want the same width
如果你想要相同的宽度
.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>