Bootstrap 3 基础css样式——图片以及容器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_20025577/article/details/81141762

一.响应式图片 img-responsive类

先看一下img-responsive类包含了哪些东西

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

display: block; 把图片变为块级元素

height: auto; 相关元素的高取决于浏览器

max-width: 100%; 最大宽度为图片宽度

举个例子：

 <div style="width:1000px; height:400px; border:1px black solid;">
        <img src="images/img2.jpg" class="img-responsive">
    </div>

这张图片的宽度为860px，div宽度为1000px

如果把div宽度改为600px

 <div style="width:600px; height:400px; border:1px black solid;">
        <img src="images/img2.jpg" class="img-responsive">
    </div>

如果想要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

  <div style="width:1000px; height:400px; border:1px black solid;">
        <img src="images/img2.jpg" class="img-responsive center-block">
    </div>

扫描二维码关注公众号，回复： 4661172 查看本文章

二.布局容器 container、container-fluid

container类 用于固定宽度并支持响应式布局的容器，container 的左右外边距

交由浏览器决定

0-768px以上宽度container为100%

768-992px以上宽度container为750px

992-1200px以上宽度container为970px

1200px以上宽度container为1170px

container类是非常有用的，它等价于创建了一个具有静态宽度并且margin值为auto的一个居中的div框

container-fluid 用于 100% 宽度，占据全部视口（viewport）的容器

  <div style="border:1px blue solid; height:320px;" class="container-fluid">
        <div style="border:1px red solid; height:320px;" class="container">
                <img src="images/img2.jpg" class="img-responsive center-block">
        </div>
    </div>

当页面缩放时：