Bootstrap 图片

一、Bootstrap 图片

1.1 基本图像

Bootstrap 提供了三个可对图片应用简单样式的 class：

• .img-rounded：添加 border-radius:6px 来获得图片圆角。
• .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
• .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

<div class="container">
    <!-- -->
    <img src="logo-144.png" class="rounded" alt="圆角效果">
    <!-- -->
    <img src="logo-144.png" class="rounded-circle" alt="椭圆图片">
    <!-- -->
    <img src="logo-144.png" class="img-thumbnail" alt="缩略图">
    <!-- -->
    <img src="logo-144.png" class="float-right" alt="图片右对齐">
    <img src="logo-144.png" class="float-left" alt="图片左对齐">
</div>

1.2 响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

• .img-fluid 类设置了 max-width: 100%; 、 height: auto; :

<img class="img-fluid" src="img_chania.jpg" alt="Chania">