html - Twitter Bootstrap 轮播图像出现扭曲

Question

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

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

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

Answer 1

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

目前看来对我来说效果不错的替代方法是使用带有背景图片的

标签。

类(class):

.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>

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

关于html - Twitter Bootstrap 轮播图像出现扭曲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16948266/