css - Twitter 2.2轮播示例：如何保持图片比例？

Question

如果您在访问http://twitter.github.com/bootstrap/examples/carousel.html时减小窗口浏览器宽度，您可以看到背景图像纵横比发生了变化。我想保持它（1:1），在左边或右边裁剪我的图像，或者水平对齐它。

你有什么建议？

Answer 1

您有2 个选项，并且都保持图像比例：

选项1

background: url(yourimage.jpg) no-repeat center center / cover;

最后一部分是background-size: cover属性。它将根据浏览器宽度放大背景图像，以确保它填满整个div。

示例：http: //i.imgur.com/0tQ9Rxm.png

选项 2

background: url(yourimage.jpg) no-repeat center center;

这是相同的效果，但没有放大部分。背景将保持其纵横比并居中，但如果您的浏览器宽度大于图像宽度（在本例中为 1500 像素），您将看到背景颜色（在本例中为白色）。

示例：http: //i.imgur.com/6x594jH.png

我推荐选项 1。如果您调整浏览器的大小，您只会看到缩放效果，但几乎没有人这样做，访问者只会看到填充的背景。

Answer 2

作为@jgthms 回复的后续行动，我使用了选项 1。但是，在 iOS Safari 上，背景图像根本没有出现。单行 CSS 语法似乎不太好。通过将其更改为以下内容，我能够使其正常工作：

background: url(yourimage.jpg) no-repeat center center;
background-size: cover;

Answer 3

对于那些像我一样没有看到 CSS 发挥作用的人来说，这里有一个上下文示例（使用 iOS 样式）。我应该注意到这是使用 Bootstrap 3.1.1。

    <div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;">
      <div class="container">
        <div class="carousel-caption">
          <p>Example text
            <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a>
          </p>
        </div>
      </div>
    </div>