Question

我的旋转木马背景图像类似于此site

我有想要延伸到浏览器宽度的100％的图像。当用户缩小其浏览器的宽度时，应在右侧和左侧裁剪图像。不应调整图像大小（高度变化的位置）。我正在使用标准的Bootstrap轮播布局

最终结果应该是这样的

enter image description here

中间的蓝色矩形是容器，其宽度应始终保持不变。在到达此容器的边框之前，背景图像（带有鞋子的深绿色）应该随着浏览器宽度的减小而右侧和左侧裁剪。

最好的方法是什么？

Answer 1

以下是诀窍：

.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;
}

关键是left: 50%和margin-left: -800px组合。负边距应该是最大宽度的一半（在这种情况下，1600px）。

Answer 2

当你说“想要延伸到浏览器宽度的100％”时，图像是相对于浏览器的当前宽度（视口），所以你的意思是你想要的图像是是初始浏览器宽度的100％？

此外，当浏览器宽度增加时，图像宽度会是多少？它们保持原始100％宽度还是增加？

我拍了一下我认为预期的行为。它需要jQuery来监视初始视口宽度。

工作演示：http://bootply.com/91957#

Answer 3

我已经搜索了这个话题很长一段时间了，我认为这是最好，最全面的解决方案。

对于bootstrap 3响应图像进行裁剪，非扭曲并保持居中，同时在不同宽度的浏览器中保持相同高度，请使用以下css背景图像：

bootstrap默认轮播：只需使用自定义类标记div，在本例中为＆＃34; carousel-01＆＃34;，并在CSS中为该类使用背景图像。以下相关设置对于背景图像对于居中的裁剪效果很重要。为div设置固定高度（通常是图像的高度），这里我使用div.item，因为通常有carousel-01，carousel-02 ......
- 重要提示：自定义类不应标记为div.carousel-caption，因为有一些bootstrap默认设置适用于它，这可能会阻止魔法发生。
HTML：
```
<div class="carousel-inner">
   <div class="item active carousel-01">
      <div class="carousel-caption">
         <h3>Beautiful Slide</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
      </div>
   </div>
</div>
```
CSS：
```
.item {
   height: 720px;
}

.carousel-01 {
   background: url('image/ca01.jpg') no-repeat center center;
   background-size: cover;
}
```

从bootstrap制作横幅：基本相同，但更简单。在div中添加一个自定义类，在本例中为＆＃34; banner-content＆＃34;，并使用类似上面的设置为其添加CSS背景图像。

HTML：

<div class="container-fluid">
   <div class="row banner-content">
      <div class="col-md-12">
         <h2>DEMO TEXT</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</p>
         <button type="button" class="btn btn-default btn-lg">Contact Us</button>
      </div>
   </div>
</div>

CSS：

.banner-content {
   background: url('../image/banner.jpg') no-repeat center center;
   background-size: cover;
   height: 530px;
}

Answer 4

我认为您要查找的是剪辑属性http://www.w3schools.com/cssref/pr_pos_clip.asp，然后您可以使用媒体查询剪切css中的相关边。

希望这有帮助

Answer 5

Lloyd Banks版本的小改进，转换-50％而不是保证金。这样，如果要更改不同视图端口的高度，只需使用媒体查询更改 .carousel-inner 的宽度。仅适用于兼容css3的浏览器。

   .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%;
       transform: translate(-50%, 0);
    }

裁剪图片侧面作为浏览器宽度在Bootstrap Carousel中减少

5 个答案: