html - Angular Bootstrap Carousel - 在不拉伸(stretch)的情况下使图像适合方框

Question

我有一个带有多张图片的 Angular 旋转木马，所有图片的大小都不相同，纵横比也不相同，我怎样才能让图片填充一个黑色方框，比如 250x250 像素而不拉伸(stretch)它们？即风景图像将在顶部和底部有黑条，肖像将在左侧和右侧有黑条。

Answer 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>