Question

图像高度不会改变：

<!DOCTYPE html>
    <html>
      <head>
        <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <!-- Override CSS -->
        <title>Image test</title>
      </head>
      <body>
        <div class="container">
          <div class="row">
            <img src="http://placehold.it/990x600&text=Main+Image" class="col img-fluid" alt="Main Image"/>
          </div>
        </div>
      </body>
    </html>

图像高度变化：

<!DOCTYPE html>
    <html>
    <head>
        <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <!-- Override CSS -->
        <title>Image test</title>
      </head>
    <body>

    <div class="container">
    <div class="row">
    <div class="col">
    <img src="http://placehold.it/990x600&text=Main+Image" class="img-fluid" alt="Main Image"/>
    </div>
    </div>
    </div>

    </body>
    </html>

为什么拆分“col”和“img-fluid”会对图像的响应性产生影响？在第一种情况下，只有图像的宽度发生变化，在第二种情况下：图像的宽度和高度发生变化。

Bootstrap：如果“col img-fluid”与图像一起组合在一起，图像高度不会改变

0 个答案: