如何使引导缩略图图像自动调整大小？答案

【问题标题】：How to make bootstrap thumbnail image auto-size?如何使引导缩略图图像自动调整大小？
【发布时间】：2020-07-26 18:05:30
【问题描述】：

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-6 rimg-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
    </div>
   </div>

我试图在 Bootstrap Grid System 中显示图像我使用了 img-thumbnail 类，但它显示了一个非常大的图像，当我将屏幕尺寸缩小时，图像并没有改变它仍然显示大图像。我想根据屏幕的要求减小图像的大小？这个怎么做？我的意思是，如果我想制作一个 960 像素的大屏幕，它应该显示大图像，如果我制作一个小屏幕，它应该显示一个小图像，我的意思是自行调整大小。我搜索了这个问题，并在堆栈溢出中找到了这个解决方案，但它对我没有帮助。

    .thumbnail{
  width: 300px;
  height: 300px;
  overflow: auto;
}

提前谢谢大家。

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您需要在每个 img 标签上添加一个 img-fluid 类以使其具有响应性。

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
   </div>
</div>

【讨论】：

【解决方案2】：

在img标签中使用的图像缩略图类不在div中

【讨论】：

【解决方案3】：

我正在删除 div img-thumbnail 类并应用于 img 标签

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <div class="container">
  <div class="row">
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" class="img-thumbnail" alt=""></div>
    <div class="col-lg-4 col-6"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" class="img-thumbnail" alt=""></div>
    <div class="col-lg-4 col-6"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" class="img-thumbnail" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" class="img-thumbnail" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" class="img-thumbnail" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" class="img-thumbnail" alt=""></div>
    </div>
   </div>

【讨论】：

【解决方案4】：

在“百分比”中设置高度和宽度，而不是在像素中。

e.g :    .thumbnail{
         width: 70%;
         height: 30%;
         overflow: auto;
         }

【讨论】：

我不认为这是我应该在图像标签而不是 div 中写入 img-thumbnail 的问题。我也试过了。不过谢谢兄弟重播