Bootstrap 5图像响应式图像

Bootstrap 5响应式图片用于根据其父元素和屏幕尺寸调整图片的大小。这意味着，图像的大小不应溢出其父元素，并将根据其父元素的大小变化而增长或缩小，而不失去其长宽比。

使用的响应性图像类：

.img-fluid:该类用于创建相对于其父元素的响应式图像。

语法:

<img src="..." class="img-fluid" alt="...">

例子1：在这个例子中，我们将使用.img-fluid类来创建响应式图像。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Responsive Images</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Responsive Images</h2>
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" 
            class="img-fluid" alt="GFG">
    </div>
</body>
  
</html>

输出:

Bootstrap 5图像响应式图像

例子2：在这个例子中，我们将使用.img-fluid和.rounded-circle类来创建一个响应式的圆形图像。

<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Responsive images</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Responsive images</h2>
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" 
            class="img-fluid rounded-circle" alt="GFG">
    </div>
</body>
  
</html>

输出:

Bootstrap 5图像响应式图像