在css中自动调整图像大小

Question

我正在使用Twitter的bootstrap，而我正在使用旋转木马。我希望图像具有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%;