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倍且左右都不会有空白