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;

这是相同的效果,但没有放大部分.背景将保持其方面并保持居中,但如果您的浏览器宽度大于图像宽度(在本例中为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;