css – Twitter 2.2轮播示例:如何保持图像比例?

前端之家收集整理的这篇文章主要介绍了css – Twitter 2.2轮播示例:如何保持图像比例?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果在 http://twitter.github.com/bootstrap/examples/carousel.html时缩小窗口浏览器宽度,则可以看到背景图像宽高比发生变化.
我想保持它(1: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.如果您调整浏览器大小但几乎没有人这样做,您只能看到缩放效果,访问者只能看到填充的背景.

猜你在找的CSS相关文章