调整和图像大小以适合 div（引导程序）答案

【问题标题】：Adjusting and image Size to fit a div (bootstrap)调整和图像大小以适合 div（引导程序）
【发布时间】：2019-12-06 07:12:06
【问题描述】：

我正在尝试让图像适合特定大小的 div。不幸的是，图像不符合它，而是按比例缩小到不够大的尺寸。我不确定使图像适合其中的最佳方法是什么。

如果这还不够，我很乐意提供更多代码，并且我愿意修复我忽略的任何其他错误。

这里是 HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

我的 CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

【问题讨论】：

我在这里发布了一个类似问题的答案：stackoverflow.com/questions/41870216/…

标签： html css twitter-bootstrap

【解决方案1】：

试试这个方法：

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

更新：

在 Bootstrap 4 中 img-responsive 变为 img-fluid，因此使用 Bootstrap 4 的解决方案是：

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

【讨论】：

酷！ class="img-responsive" 有帮助。也许这应该是今天公认的答案。
class="img-responsive" 绝对是正确的选择！这应该是公认的答案。

【解决方案2】：

您可以明确定义图像的width 和height，但结果可能不是最好看的。

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

...根据您的评论，您也可以阻止任何overflow - 请参阅this example 以查看受高度限制的图像并因太宽而被截断。

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

【讨论】：

我考虑过这样做，不幸的是，就像你说的那样，结果并不是最好的。理想情况下，我希望将图像缩小，以便图像的高度适合 div 的高度，并且超过约束 div 宽度的图像宽度将被隐藏。如果这有道理
是的，这就是我要找的！非常感谢！
其他答案是最好的答案，只需将 class="img-responsive" 添加到 img 标签即可！

【解决方案3】：

请注意Bootstrap 4 now uses img-fluid instead of img-responsive，如果遇到问题，请仔细检查您使用的版本。

【讨论】：

img-fluid 做到了！谢谢！

【解决方案4】：

只需将img-responsive 类添加到您的img 标签中，它适用于bootstrap 3 以后！

【讨论】：

对不起，请您具体说明一下，我没有正确回答您的问题，谢谢！

【解决方案5】：

我用过这个并为我工作。

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

【讨论】：

【解决方案6】：

我遇到了同样的问题，偶然发现了以下简单的解决方案。只需为图像添加一点填充，然后它会自行调整大小以适应 div。

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

【讨论】：

用 Bootstrap 而不是自定义 CSS 解决。谢谢。

【解决方案7】：

如果你们中的任何人在寻找 Bootstrap-4。在这里

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

【讨论】：

如果您有另一列带有文本的列，这不是理想的解决方案，因为它也将很难靠在边框的边缘

【解决方案8】：

大多数时候，bootstrap 项目使用 jQuery，所以你可以使用 jQuery。

只需使用JQuery.offsetHeight() 和JQuery.offsetWidth() 获取父元素的宽度和高度，然后使用JQuery.width() 和JQuery.height() 将它们设置为子元素。

如果您想使其具有响应性，请在$(window).resize(func) 中重复上述步骤。

【讨论】：