html - 使用 bootstrap 和 css3 调整图像大小

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

这适用于 ma​​x-width: 100%;, height: auto; 和 display: block;到图像，以便它可以很好地缩放到父元素。

带类的图像演示:

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