Twitter Bootstrap轮播图像显示扭曲

Question

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

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

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

Answer 1

如果你使用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>

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