自动调整CSS中图像的大小

Question

我正在使用Twitter引导程序，并且正在使用轮播。 我希望图像具有固定的500px高度和大于100％的宽度，以允许图像始终填充容器

.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: center;
  top: 0;
  left: 0;
  min-width: = 100%;
  height:  500px;
}

我希望图像始终大于容器并始终成比例。

Answer 1

您正在寻找CSS background-size属性。

使图像拉伸以使用width 100％，同时保持宽高比。

background-size: 100% auto;

使图像拉伸以使用height 100％，同时保持宽高比。

background-size: auto 100%;