我有一个带有类似于
site的背景图像的旋转木马
我有图像,我想延伸到浏览器宽度的100％.当用户缩小其浏览器的宽度时,应在右侧和左侧裁剪图像.不应调整图像大小(高度变化的位置).我正在使用标准的Bootstrap轮播布局
最终结果应该是这样的
中间的蓝色矩形是容器,其宽度应始终保持不变.在到达此容器的边框之前,背景图像(带有鞋子的深绿色)应该随着浏览器宽度的减小而右侧和左侧裁剪.
最好的方法是什么？
解决方法
以下是诀窍：
.carousel.slide{
max-width: 1600px; //the largest you want the image to stretch
min-width: 900px; //the "container" width
overflow: hidden;
}
.carousel-inner{
width: 1600px;
left: 50%;
margin-left: -800px;
}
关键是左：50％和左边距：-800px组合.负边距应该是最大宽度的一半(在这种情况下,1600px).
