图片 响应式图像 Images Figures

 

 

 

响应式图像

 

Bootstrap中的图像响应 .img-fluid

 

<img class="img-fluid" src="http://lorempixel.com/1024/580/business" alt="">

 

 

图像会随着父元素一起缩放

 

 

圆角边框

使用.img-thumbnail为图像提供圆形1px边框外观

 

<img class="img-fluid img-thumbnail" src="http://lorempixel.com/1024/580/business" alt="">

 

 

 

 

 

圆角图片

<img class="img-fluid rounded" src="banner1.jpg" alt="">

 

 

 

图片浮动  清除浮动

 

div中的img标签使用了float-left

 

此时p元素在div的外面

但是却在页面中浮动上去了

 

此时必须在其外层div补上清除浮动

 

 这样div内的排版不会对其他部分造成影响 而造成跑版问题

 

 

 

图片置中

方式一

<div class="clearfix">

<!-- 左右margin设置为auto 将图片的display设置为block-->

<img class="img-fluid rounded mx-auto d-block" width="300px" src="banner1.jpg" alt="">

</div>

 

方式二 

 

<!--方式二: 将图片视为文字的一部分 在外层的部分设置 class="text-center"-->

<div class="text-center">

　　<img class="img-fluid rounded" width="300px" src="绿色树林3440x1440风景壁纸_彼岸图网.jpg" alt="">

</div>

 

 

Figures

 任何时候你需要显示一段内容 - 如带有可选标题的图像，请考虑使用<figure>。

 使用附带的.figure，.figure-img以及.figure-caption类为HTML5的<figure>和<figcaption>元素提供了一些基线的风格  

 请务必将该.img-fluid类添加到您的内容中<img>以使其具有响应性

 

  <figure class="figure">
            <img class="img-fluid rounded figure-img" width="900px" src="绿色树林3440x1440风景壁纸_彼岸图网.jpg"
                alt="A generic square placeholder image with rounded corners in a figure.">
            <figcaption class="figure-caption">A caption for the above image.</figcaption>
  </figure>