Question

我正在尝试让图像适合特定大小的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;


}

Answer 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>

Answer 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%;
}

Answer 3

只需提醒Bootstrap 4 now uses img-fluid instead of img-responsive，如果您遇到问题，请仔细检查您正在使用哪个版本。

Answer 4

只需将课程img-responsive添加到您的img代码中，它就适用于bootstrap 3以后！

Answer 5

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

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

Answer 6

我用过这个并且适合我。

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

Answer 7

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

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

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

Answer 8

如果您要查找 Bootstrap-4 。在这里

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

调整和图像大小适合div（bootstrap）

8 个答案: