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;

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

示例：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>

Twitter 2.2轮播示例：如何保持图像比例？

3 个答案: