twitter-bootstrap 随着 Bootstrap Carousel 中浏览器宽度的减小，裁剪图像边
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19796648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Crop Image Sides as Browser Width Decreases in Bootstrap Carousel
提问by Lloyd Banks
I have a carousel with background images similar to this site
我有一个带有类似于本网站的背景图片的轮播
I have images that I would like to stretch to 100% of the browser width. When the user shrinks the width of his or her browser, the image should be cropped on the right and left hand sides. The image should not be resized (where the height changes). I am using the standard Bootstrap carousel layout
我有想要拉伸到浏览器宽度的 100% 的图像。当用户缩小他或她的浏览器的宽度时，应该在左右手边裁剪图像。不应调整图像大小（高度发生变化的地方）。我正在使用标准的 Bootstrap 轮播布局
End result should follow be something like this
最终结果应该是这样的
The blue rectangle in the middle is the container whose width should always be maintained. Before this container's borders are reached, the background image (in dark green with the shoes) should have it's right and left sides cropped as the width of the browser decreases.
中间的蓝色矩形是容器，其宽度应始终保持不变。在到达此容器的边界之前，背景图像（带有鞋子的深绿色）应该随着浏览器宽度的减小而裁剪其左右两侧。
What's the best way to do this?
做到这一点的最佳方法是什么？
回答by Lloyd Banks
The following did the trick:
以下是诀窍：
.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;
}
The key is the left: 50%and margin-left: -800pxcombo. The negative margin should be half of what the max width is(in this case, 1600px).
关键是left: 50%和margin-left: -800px组合。负边距应该是最大宽度的一半（在本例中为 1600 像素）。
回答by ythdelmar
I've googled this topic for a long time, and I think this is the best and the most comprehensive solution.
我在这个话题上搜索了很长时间，我认为这是最好和最全面的解决方案。
For bootstrap 3 responsive images to be cropped, non-distorted and remain centered while keeping the same height across different width of browsers, use css background images like this:
为了使引导 3 响应图像被裁剪、不失真并保持居中，同时在不同宽度的浏览器上保持相同的高度，请使用如下 css 背景图像：
bootstrap default carousel: just mark div with a custom class, in this case "carousel-01", and use background image in CSS for that class. Related settings below for the background image is important for the centered, cropped effect. Set fixed height (usually the height of the image) for the div, here I use div.item because there are usually carousel-01, carousel-02...
- Important: the custom class shouldn't be marked to the div.carousel-caption, because there are some bootstrap default setting applying to it, which could stop the magic from happening.
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; }making a banner from bootstrap: basically the same, but simpler. Add a custom class to div, in this case, "banner-content", and add CSS background image to it with similar settings like above.
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; }
bootstrap 默认轮播：只需使用自定义类标记 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; }从引导程序制作横幅：基本相同，但更简单。将自定义类添加到 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; }
回答by Zim
When you say, "would like to stretch to 100% of the browser width" the images are relative to the current width of browser (viewport), so do you mean you want the images to be 100% of the initialbrowser width?
当您说“想要拉伸到浏览器宽度的 100%”时，图像是相对于浏览器的当前宽度（视口），所以您的意思是您希望图像是初始浏览器宽度的100% ？
Also, what would the image width be when the browser width increases? Do they stay at original 100% width or increase?
另外，当浏览器宽度增加时，图像宽度会是多少？它们是保持原来的 100% 宽度还是增加？
I took a shot at what I think the expected behavior is. It requires jQuery to monitor the initial viewport width.
我对我认为的预期行为进行了尝试。它需要 jQuery 来监控初始视口宽度。
Working demo: http://bootply.com/91957#
工作演示：http: //bootply.com/91957#
回答by Adam 'Sacki' Sackfield
I think what your looking for is the clip property http://www.w3schools.com/cssref/pr_pos_clip.aspthen you can use media queries to clip the relevant sides in the css.
我认为您要寻找的是剪辑属性http://www.w3schools.com/cssref/pr_pos_clip.asp然后您可以使用媒体查询来剪辑 css 中的相关边。
Hope this helps
希望这可以帮助
回答by Kelvyn Ornette Sol Marte
A Small improvement to the Version of Lloyd Banks, with transform -50% instead of margin. That way you only have to change the widthof .carousel-innerwith media queriesif you want to change the height on different view ports. Works only with css3 compatible browsers though.
对 Lloyd Banks 版本的小幅改进，转换 -50% 而不是保证金。这样，你只需要改变宽度的.carousel-内与媒体查询，如果你想改变不同的视口的高度。仅适用于 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);
}
