我有一个有几个图像的角度旋转木马,所有图像都不是相同的尺寸,也没有相同的宽高比,我怎样才能让图像填充一个黑色方框,说250x250像素而不拉伸它们?即景观图像顶部和底部会有黑条,肖像左右会有黑条。
答案 0 :(得分:1)
尝试使用max-width
和max-height
,如下所示:
figure {
width: 250px;
height: 250px;
background-color: #000;
text-align: center;
display: table-cell;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
<figure>
<img src="http://lorempixel.com/250/150">
</figure>