Twitter Bootstrap轮播图像显示扭曲

时间:2013-06-05 19:31:34

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

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

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

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

7 个答案:

答案 0 :(得分:10)

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

对我来说似乎运行良好的替代方法是使用< 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">&nbsp;</div>
  <div class="container">
    <div class="carousel-caption">
      <!-- Caption -->
    </div>
  </div>
</div>

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

答案 1 :(得分:2)

你有:

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

将高度更改为100%

答案 2 :(得分: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

答案 3 :(得分:1)

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

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

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

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

答案 4 :(得分:0)

好的,我能做的最好的就是这个......

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

答案 5 :(得分:0)

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

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

答案 6 :(得分:0)

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

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

&#13;
&#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;
&#13;
&#13;

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