bootstrap响应式图片应用(空白区域)

bootstrap的响应式图片, 其效果就是随着页面宽度缩小, 图片宽高会随着缩小

这就给予页面更好的美观效果

如果不是响应式图片, 那么页面缩小, 图片的宽高是固定不变, 这样显示效果不好

在bootstrap中使用样式类: img-responsive即可, 但是本文重点不是说这个

在页面中, 如果图片很大, 通常是需要缩放图片比例的, 如下: 

<img alt="" src="/image/dsz.jpg" class="img-responsive" style="width:50%;height:50%">

你会发现图片右边多出和图片相同宽度的 空白区域 , 如果使用 center-block将图片居中, 但是左右会多出1/2的空白

这样空白区域就造成了其它元素与此图片之间的空隙很大, 影响了页面布局

图片呢通常会放在一个div中, 调整div的样式, 方便控制图片位置大小

现在加上外层div:

<div>
    <img alt="" src="/image/dsz.jpg" class="img-responsive" style="width:50%;height:50%">
</div>

图片的宽高位置一般不要直接给到img上, 而是 将图片要展示的宽高设置在div上面 , 图片占满这个div就可以了

<div style="width:50%;height:50%">
    <img alt="" src="/image/dsz.jpg" class="img-responsive" 
        style="width: auto; height: auto; max-width: 100%; max-height: 100%;">
</div>

 解释: 先是给img的宽高设置100%(也可以不用给img样式, 只需要img-responsive即可), 不设置图片宽度, 它宽高也是100%

主要是调整div的宽高, 这里设置为50%, 这个50%表示该div缩小1倍, 则里面的img也就缩小1倍

这样就达到了img缩小1倍且左右都不会有空白