06 - 文本样式之「图片类」

不二如是

图片是网页中不可缺少的元素。

巧妙地在网页中使用图片可以为网页增色不少。

通过 Bootstra p所提供的 .img-fluid 类让图片支持响应式布局的原理是：

将图片的相关代码设置为 max-width: 100%、height:auto，以便其随父元素一起缩放。

此外还可以使用 .img-thumbnail 类使图片在支持响应式布局的同时具有 1px 宽度的圆角边框：

1.     <div style="width: 310px; margin-bottom: 10px;
   
2.     border: 1px solid #000;
   
3.     padding: 5px;">
   
4.         <img src="1.png" alt="红">
   
5.     </div>
   
6. 
   
7.     <div style="width: 300px; float: left;">
   
8.         <img src="1.png" class="img-fluid" alt="红">
   
9.     </div>
   
10. 
    
11.     <div style="width: 300px; float: right;">
    
12.         <img src="1.png" class="img-thumbnail" alt="红">
    
13.     </div>

复制代码

效果：



可以看到，如果不使用 .img-* 类，则图片会超出父元素的边界（左上图）。

如果想让图片变成圆形，例如头像的显示，则可以结合边框工具类 .rounded-circle 一起使用。

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅 ）

官方 Web 课程：

liuhongrun2022

感谢分享，学起来

琅琊王朝

感谢分翔，学起来