Question

我有一个想要响应容器大小的图像。父容器（封面照片）的高度为180px。图像的高度为853像素。但是当使用img-fluid时，图像不会使容器高度保持在180px，而是保持自己的高度为853px。

＆＃13;

              <!doctype html>
              <html lang="en">
                <head>
                  <title>Hello, world!</title>
                  <!-- Required meta tags -->
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                  <!-- Bootstrap CSS -->
                  <link rel="stylesheet" href="css/bootstrap.min.css">
               

                 <style>
                   .cover-photo {
                      height: 180px;
                    }
                   </style>
                      
                </head>
                <body>
                	<div class="container-fluid">

                    <div class="container">
                      <div class="row">
                        <div class="cover-photo">
                          <img class="img-fluid" src="http://newlovewallpapers.in/images/hd-love-images-and-wallpaper/hd-love-images-and-wallpaper-11-1280.jpg" alt="Background profile">
                        </div>
                      </div>
                    </div>
                  </div>
                
                  <!-- Optional JavaScript -->
                  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
                  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
                  <script src="js/bootstrap.min.js"></script>
                  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
                  <script src="js/parallax.js"></script>
                </body>
              </html>

＆＃13;

据我所知，Bootstrap中的img-fluid是最大宽度：100％;和身高：汽车;并应用于图像，以便它与父元素一起缩放。但在这种情况下，它不会缩放到父高度。任何见解？谢谢！

Answer 1

早上好

您需要将以下CSS提供给img-fluid class

 .img-fluid {    
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;
    }

bootstrap img响应高度不保持容器高度

1 个答案: