如何用Bootstrap把图片放在一个没有空间的盒子里

Bootstrap 4是一个由Twitter开发的用于前端网页开发的CSS库，它帮助开发者美化网页的外观。Bootstrap库有预定义的CSS类，很容易使用，它可以帮助开发者以最小的努力为网站提供一个艺术的外观。

下面一行显示了在网页中插入一个简单图片的语法

<img src="image-path" alt="Show this text if image does not appear" />

实际上有三种方法来解决这个问题。我将在这里提供所有三种解决方案。

通过给图像提供一个边界。因此，它使图像出现在框内。
通过使用自定义css在具有边框属性的div内插入一个图片。
通过使用bootstrap。

让我们看看上述方式的示范。

1.通过为图像提供一个边界。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap - Image inside Box</title>
</head>
<!-- Custom css to provide border to the image -->
<style>
    img{
        border:5px solid green; 
     /* This line gives a green border of 5 pixels
          width to all images on the webpage. */ 
        This line does not cause any space 
        between the image and the border. */
    }
</style>
<body>
        <h2>
            Putting image inside a Box
        </h2>
<!-- Put the path of image in the src of image tag. -->
        <img src="..." alt="Image Loading Failed" />    
</body>
</html>

输出:
如何用Bootstrap把图片放在一个没有空间的盒子里？

2.通过使用自定义的css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap - Image inside Box</title>
</head>
   <!-- Custom css to provide border to the div -->
<style>
    /* 
    border class is used to give border to the div tag.
     */
   .border{
       border:5px solid green;
       /* green border of 5 pixels width */
       padding:0;
       /* padding to remove the space
       between inner components of the div*/
       max-width: fit-content;
       /*
        making the div take the 
        size of the image
        */
       }
    img{
        display: block;
        /* to make the image occupy 
        the whole container */
    }
  
</style>
<body>   
        <h2>
            Putting image inside a Box
        </h2>
        <!-- Enclosing the image tag inside the div
            having border class. 
        -->
        <div class="border">
            <img src="..." alt="Image Loading Failed" />
        </div>
      
</body>
</html>

输出:
如何用Bootstrap把图片放在一个没有空间的盒子里？

3.使用bootstrap 4 css。我们将使用被称为卡片的预定义类来使图像出现在一个盒子里。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" 
          content="ie=edge">
    <title>Bootstrap - Image inside Box</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" 
          integrity=
"sha256-A47OwxL/nAN0ydiDFTSGX7ftbfTJTKgiJ0zqCuTPDh4=" 
          crossorigin="anonymous" />
</head>
<style>
    .border {
        border: 5px solid green !important;
        /* Border of width 5 pixels green in color */
        width: fit-content;
        /* To make the image take whole space of container */
    }
</style>
  
<body>
    <!-- Providing necessary padding and margin -->
    <h2 class="mx-5 mt-5">
            Putting image inside a Box
        </h2>
    <!-- using card class to place image inside a box -->
    <!-- Added custom css class border for additional properties -->
    <!-- Added necessary padding and margin classes -->
    <div class="card mx-5 px-0 py-0 border">
        <!-- Added card-img-top class to show 
             the image on the top of the card. -->
        <!-- Since the image is the only content in card -->
        <!-- Image appears to be taking the whole card. -->
        <img src="..." alt="Image Loading Failed" class="card-img-top" />
    </div>
  
</body>
  
</html>

输出:
如何用Bootstrap把图片放在一个没有空间的盒子里？