Question

我的图片存在问题但他们没有响应

    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 visible-xs">
          <div class="overview-device-wrapper">
            <img src="img/landing/landing-app-left-overview.png" class="img-responsive" alt="">
          </div>
        </div>
    /* Small decives (phones, 320px and up)*/
@media (min-width: @screen-xs-min) { 
    .overview-device-wrapper{

        width: 320px;
    }

}

图片在移动浏览器中无法正常显示

image on a pc screen image on a mobile browser

图片应显示在移动浏览器的左侧而不是底部

Answer 1

自适应图片

通过添加

，可以使Bootstrap 3中的图像响应友好

响应级别

的.img响应。

这适用于 max-width：100％; ， height：auto; 和 display：block ;到图像，以便它很好地缩放到父元素。

图片演示，分类：

<img src="..." class="img-responsive" alt="Responsive image">

使用bootstrap和css3调整图像大小

1 个答案: