6

我有一个与此站点类似的背景图片的轮播

我有一些图像想要拉伸到浏览器宽度的 100%。当用户缩小他或她的浏览器的宽度时，图像应该在右侧和左侧被裁剪。不应调整图像大小（高度变化的地方）。我正在使用标准的 Bootstrap 轮播布局

最终结果应该是这样的

在此处输入图像描述

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

最好的方法是什么？

4

5 回答 5

6

以下是诀窍：

.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组合。负边距应该是最大宽度的一半（在本例中为 1600 像素）。

于 2013-11-06T05:55:29.103 回答
3

这个话题我google了很久，我觉得这是最好最全面的解决方案。

对于要裁剪、不变形并保持居中的 bootstrap 3 响应式图像，同时在不同宽度的浏览器上保持相同的高度，请使用这样的 css 背景图像：

  1. 引导默认轮播：只需使用自定义类标记 div，在本例中为“carousel-01”，并在 CSS 中为该类使用背景图像。以下背景图像的相关设置对于居中的裁剪效果很重要。为div设置固定高度（通常是图片的高度），这里我使用div.item，因为通常有carousel-01，carousel-02...

    • 重要提示：不应将自定义类标记到 div.carousel-caption，因为有一些引导程序默认设置应用于它，这可能会阻止魔法的发生。

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

  2. 从引导程序制作横幅：基本相同，但更简单。向 div 添加一个自定义类，在本例中为“banner-content”，并使用与上述类似的设置向其中添加 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;
}
于 2014-08-27T07:00:09.480 回答
1

当您说“想拉伸到浏览器宽度的 100% ”时，图像是相对于浏览器的当前宽度（视口）而言的，那么您的意思是您希望图像是初始浏览器宽度的 100%？

另外，当浏览器宽度增加时，图像宽度会是多少？它们是保持原来的 100% 宽度还是增加？

我对我认为预期的行为进行了拍摄。它需要 jQuery 来监控初始视口宽度。

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

于 2013-11-05T19:34:43.753 回答
0

我认为您正在寻找的是剪辑属性http://www.w3schools.com/cssref/pr_pos_clip.asp然后您可以使用媒体查询来剪辑 css 中的相关方面。

希望这可以帮助

于 2013-11-05T19:23:42.733 回答
0

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);
    }
于 2015-06-02T10:51:08.017 回答