三种图像样式
分别为圆角、圆形、缩略图(带边框)
<img src="/images/me.jpg" class="img-rounded" alt="Rounded Image">
<img src="/images/me.jpg" class="img-circle" alt="Circular Image">
<img src="/images/me.jpg" class="img-thumbnail" alt="Thumbnail Image">
01.PNG
响应式图像
响应式图像保证 100% 宽度,不保证高度。
通过添加 .img-responsive
样式可以将图像变为响应式图像
如果想要居中可以添加 .center-block
样式
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>提示:</strong> 改变浏览器的大小可以看到响应式图片如何工作
</div>
<h2>非响应式图片</h2>
<div class="box center-block">
<img src="/images/girls.jpg" alt="Cloudy Sky">
</div>
<hr>
<h2>响应式图片</h2>
<div class="box center-block">
<img src="/images/girls.jpg" class="img-responsive " alt="Cloudy Sky">
</div>
02.PNG
网友评论