使用 Bootstrap 调整和图像大小以适应 div

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;

}

原文由 smilefreak24 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

jsFiddle

---

…根据您的评论，您也可以阻止任何 overflow - 请参阅 此示例 以查看受高度限制的图像并因为它太宽而被切断。

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

.top1 img {
    height:100%;
}

原文由 jterry 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这样：

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

原文由 Shafeeque S 发布，翻译遵循 CC BY-SA 4.0 许可协议