Bootstrap 4 中使用的不同类型的图像形状和角

在本文中，我们将学习如何使用 Bootstrap 制作不同的图像形状，还将通过示例了解其实现。 Bootstrap 为图像提供了不同的类，以使它们的外观更好，并使其具有响应性。使图像具有响应性意味着它应该根据其父元素进行缩放。即图像的大小不应溢出其父元素，并且会根据其父元素大小的变化而增长和缩小，而不会丢失其纵横比。我们将讨论 Bootstrap 中用于图像的不同类。

在 Bootstrap 4 中，图像使用 标签以不同的形状和角显示。这些形状和角可以使用类来实现。下面给出了可用于 bootstrap 中图像的不同形状和角：

• 圆角
• 圆圈
• 缩略图
• 对齐图像

在这里，我们使用了 Bootstrap 4 CDN 链接，该链接可以从他们的官方网站轻松获得。

引导 CDN 链接：

在要加载的所有其他 CSS 文件之前，将给定的样式表 复制并粘贴到 标记内。

为了使用 Javascript 功能，我们可以使用下面的 JavaScript 的 CDN 链接。

 

我们将利用上面的 CDN 链接来实现它来制作不同形状的图像。

圆角：在圆角中，显示的图像将具有圆角。 .rounded类为图像添加圆角。此类与 标签一起使用。

句法：

示例 1：此示例说明了.rounded类在 Bootstrap 中的使用。

HTML

  

    
    
    
    

  

    
        
GeeksForGeeks
        
Rounded Corners
        
    

  

输出：输出中显示的图像角是四舍五入的。

Circle： .rounded-circle类用于创建圆形图像。

句法：

示例 2：此示例说明了在 Bootstrap 中使用.rounded-circle类。

HTML

  

    
    
    
    

  

    
        

            GeeksForGeeks
        
          
        

            Circle Image
        
        
    

  

输出：输出中显示的图像，是一个圆形图像。

缩略图：缩略图是代表较大图像的小图像。 .img-thumbnail类用于创建缩略图（有边框）图像。

句法：

示例 3：此示例说明了在 Bootstrap 中使用.img-thumbnail类。

HTML

  

    
    
    
    

  

    
        

            GeeksForGeeks
        
          
        

            Thumbnail Image
        
          
        
    

  

输出：显示的图像被边框包围。

对齐图像：用于将图像左右对齐。 .float-left和.float-right类用于设置图像的左右对齐。

句法：

示例 4：此示例说明了.float-left或.float-right类的使用，它们将用于在 Bootstrap 中设置图像的左右对齐方式。

HTML

  

    
    
    
    

  

    
        

            GeeksForGeeks
        
          
        

            Aligning Image
        
          
        
          
        
    

  

输出：从输出中，一个图像在左侧对齐，另一个在右侧对齐。