html - 在css中自动调整图像大小

Question

我正在使用 bootstrap by twitter 和 carousel。我希望图像具有 500 像素的固定高度和大于 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 属性。

使图像拉伸(stretch)以使用 100% 的宽度，同时保持纵横比...

background-size: 100% auto;

使图像拉伸(stretch)以使用 100% 的高度，同时保持纵横比...

background-size: auto 100%;