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

标签 html css twitter-bootstrap-3

我的图片有问题,它们没有响应

    <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

图片应该出现在手机浏览器的左边而不是底部

最佳答案

响应式图片

Bootstrap 3 中的图像可以通过添加

响应类

.img-responsive.

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

带类的图像演示:

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

关于html - 使用 bootstrap 和 css3 调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38367912/

相关文章:

javascript - 单击按钮时如何使用 POST 请求提交表单输入数据?

html - 使用 css 选择器定位 html 标签文本

html - 产生的页面卡在 Rails 的页眉中

jquery - Bootstrap崩溃动画不流畅

javascript - 防止已经改变颜色的单元格再次改变颜色

jquery - CSS 当前类未被删除

css - 修复了 Firefox 7.0.1 中的定位错误,一些溢出似乎导致固定 div 上的边距为 1px

jquery - Bootstrap 3 面板页脚

javascript - 引导设置错误 : Uncaught ReferenceError: jQuery is not defined & Uncaught Error: Bootstrap's JavaScript requires jQuery

html - Bootstrap 字体文件夹