如果在
http://twitter.github.com/bootstrap/examples/carousel.html时缩小窗口浏览器宽度,则可以看到背景图像宽高比发生变化.
我想保持它(1:1),在左边或右边裁剪我的图像,或者水平对齐它.
我想保持它(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.如果您调整浏览器大小但几乎没有人这样做,您只能看到缩放效果,访问者只能看到填充的背景.