Question

Q1 我想知道如何使用bootstrap使所有图像大小相同？另外，如果我想要它更小或更大，我如何根据我的需要调整它？

Q2 如何制作这些图片img-responsive？

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <a href="https://codemoji.com/blog/Coding.jpg" target="_blank">
              <img src="https://codemoji.com/blog/Coding.jpg" alt="Lights" style="width:100%">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
              <img src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="width:100%">
            </a>
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <a href="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" target="_blank">
              <img src="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" alt="Fjords" style="width:100%">
            </a>
          </div>
        </div>
      </div>
    </div>
    
    </body>
    </html>

Answer 1

您可以尝试将固定值设置为高度值，这是一个可以调整所有图像的值。
您可以设置固定值以及height:auto或固定高度和width:auto
要在不修改css的情况下执行此操作，您需要调整图像尺寸，然后可以使用 img-responsive ，因为此类具有以下css样式： display: block; max-width: 100%; display: block

Answer 2

要使图像大小相同，请为图像设置min-height。
要使它们更小或更大，请更改响应类class="col-md-4 col-sm-4"。他们负责宽度。
要使用img-responsive课程，只需将class="img-responsive"添加到img代码。

工作代码段

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap 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/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <div class="row">
        <div class="col-md-4 col-sm-4">
          <div class="thumbnail">
            <a href="https://codemoji.com/blog/Coding.jpg" target="_blank">
              <img class="img-responsive" src="https://codemoji.com/blog/Coding.jpg" alt="Lights" style="min-height:400px;width:100%;">
            </a>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="thumbnail">
            <a href="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" target="_blank">
              <img class="img-responsive" src="http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg" alt="Nature" style="min-height:400px;  width:100%;">
            </a>
          </div>
        </div>
        <div class="col-md-4 col-sm-4">
          <div class="thumbnail">
            <a href="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" target="_blank">
              <img class="img-responsive" src="http://www.discdepotdundee.co.uk/files/2014/07/intel-and-amd-processor-installation-disc-depot-dundee.jpg" alt="Fjords" style="min-height:400px; width:100%;">
            </a>
          </div>
        </div>
      </div>
    </div>
    
    </body>
    </html>

希望这有帮助！

如何使用引导程序使这些图像大小相同？

2 个答案: