Bootstrap（七）：CSS--图片

1.基本样式

主要四个样式类：

设置布局 .img-responsive : 可以让图片支持响应式布局，从而让图片在其父元素中更好的缩放；

设置形状 .img-rounded ： 设置图片为圆角；

设置形状 .img-circle ： 设置图片为圆形(照片若是长方形，则是椭圆形，照片若是正方形这是圆形)；

设置形状 .img-thumbnail ：设置图片为带边框(白色)；

 

 

<form class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-10 col-xs-3">
            <img alt="" src="TEST.JPG" class="img-responsive">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4 col-xs-4">
            <img alt="" src="TEST.JPG" class="img-responsive img-rounded">
        </div>
        
        <div class="col-sm-4 col-xs-4">
            <img alt="" src="TEST.JPG" class="img-responsive img-circle">
        </div>
        
        <div class="col-sm-4 col-xs-4">
            <img alt="" src="TEST.JPG" class="img-responsive img-thumbnail">
        </div>
    </div>

</form>

 

转载于:https://www.cnblogs.com/devan/p/5208929.html