Angular Bootstrap Carousel - 将图像放入方框而不拉伸

时间:2014-10-14 14:54:18

标签: html css angularjs twitter-bootstrap carousel

我有一个有几个图像的角度旋转木马,所有图像都不是相同的尺寸,也没有相同的宽高比,我怎样才能让图像填充一个黑色方框,说250x250像素而不拉伸它们?即景观图像顶部和底部会有黑条,肖像左右会有黑条。

1 个答案:

答案 0 :(得分:1)

尝试使用max-widthmax-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>