Twitter Bootstrap 轮播图像出现扭曲答案

【问题标题】：Twitter Bootstrap carousel image appears distortedTwitter Bootstrap 轮播图像出现扭曲
【发布时间】：2013-06-01 15:29:24
【问题描述】：

我正在基于使用 Twitter Bootstrap 构建的主题构建网站：http://demo.graphikaria.com/agilis/theme。

每当我减小浏览器的宽度时，主页轮播的背景图像就会变形。

对于模板使用的默认褪色背景图像，这没什么大不了的，但如果您想使用清晰的图像或徽标，它会显得扭曲或压扁。

【问题讨论】：

看到这个问题stackoverflow.com/questions/10591422/…

标签： html css twitter-bootstrap responsive-design carousel

【解决方案1】：

如果您使用 IMG 标记，它的宽度始终不会超过其容器 DIV。因为引导程序会重新调整固定图像的大小以实现流畅的布局，尤其是在移动设备上，所以图像会被压缩到屏幕宽度。

目前看来对我来说效果很好的另一种方法是使用带有背景图像的

标签。
班级：

.carousel-inner > .item > .carousel-image { width: 100%; height: 500px; text-align: center; align: center; }

商品代码：

#csl-item1 { background:url(img/carousel_image1.jpg); background-repeat: no-repeat; background-position: center top; }

物品：

<div class="item active"> <div id="csl-item1" class="carousel-image"> </div> <div class="container"> <div class="carousel-caption">  </div> </div> </div>

我很想知道是否有人对这种方法有任何错误，所以如果你认为这是一个坏主意，请告诉我......

【讨论】：

没关系，我会添加 background-size: cover;填满空间
听起来不错，我会在某个时候对此进行测试并更新我的答案 - 除非你有一个示例链接，我已经可以检查了。

【解决方案2】：

我发现的最简洁的解决方案是将此 css 添加到幻灯片中的图像中：

object-fit: cover; 
overflow: hidden;

您甚至可以将其内联添加到 img 标签中：

<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">

这里有一篇很棒的文章展示了 CSS3 属性的示例及其对图像纵横比的影响：http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

【讨论】：

这对我来说非常有效。我在我的 Bootstrap 轮播中使用 Foundations Interchange，但我对调整浏览器大小时图像被挤压和扩展的方式不满意。谢谢！

【解决方案3】：

你有：

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

将高度改为100%。

【讨论】：

【解决方案4】：

在 Chrome 中查看，默认的 max-width: 100% 似乎不是你想要的。

在您的 CSS 中，您可以添加到已定义的规则以使浏览器使用默认值。

.carousel .item > img { max-width: none }

值得注意的是，您指定min-width: 100% 结合绝对height，所以在大屏幕上（比如我的，即1080p），如果图像太宽，它仍然会扭曲图像，从而改变纵横比并再次扭曲图像。

【讨论】：

【解决方案5】：

好吧，我能做的就是这样……

/* Carousel base class */
.carousel {
  height: auto;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 35;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    background:#e64c6c;
    border:.5px solid #e7c1af;
    overflow:hidden;
    padding:3px;
    min-height: 500px; 
}
.carousel-inner > .item > img {
    float:right;
    padding: 2px;
    padding-left: 3px;
    min-width: 500px;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #e7c1af;
}

【讨论】：

【解决方案6】：

使用 bootstrap 3.3.7，我可以通过在此处删除 carousel.css 中的“高度”行来解决此问题：

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}

【讨论】：

【解决方案7】：

在我的情况下，当屏幕尺寸增加时，图像会失真。我正在使用 Bootstrap 4 制作一个启动 Bootstrap 免费模板 (https://startbootstrap.com/)。

根据 Ira Herman 的上述回答（如果我有足够的学分，我会发表评论），我最终得到了以下代码来解决我的问题：

.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  height: 32rem;
  object-fit: cover;
  overflow: hidden;
  object-position: 20% 19%;
}

对象位置的 x 和 y 坐标可以根据您希望图像增加、减少的方式进行调整。在我的情况下，从右侧调整图像也有帮助。我希望这会有所帮助。

【讨论】：