113

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


}
4

8 回答 8

198

试试这个方法： 

<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 4img-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>
于 2015-05-15T06:19:20.553 回答
62

您可以明确定义图像的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%;
}
于 2013-05-09T16:13:52.137 回答
57

请注意，Bootstrap 4 现在使用img-fluid而不是img-responsive，因此如果遇到问题，请仔细检查您使用的版本。

于 2017-04-26T02:44:17.583 回答
33

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

于 2016-03-11T10:18:29.613 回答
8

我使用了它并为我工作。

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>
于 2018-04-19T03:26:26.760 回答
7

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

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
于 2015-10-29T03:07:16.140 回答
6

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

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>
于 2018-09-12T04:17:14.017 回答
2

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

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

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

于 2016-07-02T23:04:57.973 回答