Question

我有一个img嵌套在col中。但是，col比图像大。好像在底部有padding，但我看不到。这是屏幕截图：https://imgur.com/a/K8iRWLf

在同一行的单独列中嵌套了另一个img，但是img的大小完全相同。

编辑*我对每个建议尝试了两种修复方法：显示：块和垂直对齐：底部（单独），这两种方法都不起作用。

 .img-shrink {
    max-width: 80%;
    max-height: 80%;
  }

 <div class="row justify-content-center">
                <div class="col-3 body-padding text-center">
                    <img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
                </div>
                <div class="col-3 body-padding text-center">
                    <img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">   
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-2 align-text-top">
                    <h4 class="product-header">Lorem Ipsum</h4>
                </div>
                <div class="col-2 align-text-top">
                    <h4 class="product-header">Lorem Ipsum</h4>
                </div>
            </div>

Answer 1

玩转之后，我发现了。列的大小适合我的图像的实际大小，而不是最大宽度/高度：浏览器呈现的80％图像。如果有人在不调整原始图像大小的情况下知道解决此问题的方法，请赐教。

Answer 2

尝试一次，看看是否有效

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CSS Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  </style>
</head>
<body>
    <div class="row justify-content-center">
        <div class="col-3">
            <img class="img-fluid" src="img.jpg" alt="beer">
        </div>
        <div class="col-3">
            <img class="img-fluid" src="image.jpg" alt="treats">   
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-3 align-text-top text-center">
            <h4 class="product-header">Lorem Ipsum</h4>
        </div>
        <div class="col-3 align-text-top text-center">
            <h4 class="product-header">Lorem Ipsum</h4>
        </div>
    </div>       
</body>
</html>

Bootstrap Col正在增加额外的高度，而不是紧紧包裹img

2 个答案: