作为浏览器宽度裁剪图像边在引导轮播中减少 [英] Crop Image Sides as Browser Width Decreases in Bootstrap Carousel

问题描述

我有一个类似于此网站的背景图片轮播

I have a carousel with background images similar to this site

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

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

最终结果应该是这样

中间的蓝色矩形是容器其宽度应始终保持。在达到此容器边框之前，背景图片（以深绿色显示鞋子）应在浏览器宽度减小时裁剪右侧和左侧。

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.

这是最好的方法吗？

推荐答案

以下是诀窍：

.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％ code>和 margin-left：-800px 组合。负边距应为最大宽度的一半（在本例中为1600像素）。

The key is the left: 50% and margin-left: -800px combo. The negative margin should be half of what the max width is(in this case, 1600px).

这篇关于作为浏览器宽度裁剪图像边在引导轮播中减少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！