Question

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

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

对于模板使用的默认褪色背景图像，这不是什么大问题，但如果您想使用清晰的图像或徽标，则会出现扭曲或挤压。

Answer 1

如果您使用IMG标记，它的结尾总是不会超过其容器DIV。因为bootstrap重新调整固定图像的大小以便进行流体布局，特别是在移动设备上，所以图像会被压缩到屏幕宽度。

对我来说似乎运行良好的替代方法是使用＆lt; div＆gt;带有背景图片的标签。

班级：

.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">&nbsp;</div>
  <div class="container">
    <div class="carousel-caption">
      <!-- Caption -->
    </div>
  </div>
</div>

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

Answer 2

你有：

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

将高度更改为100%。

Answer 3

我发现最干净的解决方案是在幻灯片中将此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

Answer 4

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

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

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

值得注意的是，您指定min-width: 100%与绝对height相结合，因此在大屏幕（如我的，1080p）上，如果图像太宽，它仍会扭曲图像，因此改变宽高比并再次扭曲图像。

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

Answer 6

使用bootstrap 3.3.7，我可以通过在carousel.css中删除'height'行来解决这个问题：

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

Answer 7

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

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

＆＃13;

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

＆＃13;

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

Twitter Bootstrap轮播图像显示扭曲

7 个答案: