调整和图像大小以适应带有 Bootstrap 的 div

我正在试图得到一个图像，以适应一个特定的大小 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;




}
443939 次浏览
小开
最佳答案

您可以显式地定义图像的 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%;
}
小开

试试这样:

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

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

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

只需将类 img-responsive添加到您的 img标记中，就可以在引导程序3中使用！

小开

大多数情况下，bootstrap 项目使用 jQuery，因此您可以使用 jQuery。

Just get the width and height of parent with JQuery.offsetHeight() and JQuery.offsetWidth(), and set them to the child element with JQuery.width() and JQuery.height().

如果你想让它响应，在 $(window).resize(func)中也重复上面的步骤。

小开

提醒一下 引导程序4现在使用 ABC0而不是 img-responsive，所以如果你有问题的话，仔细检查一下你使用的是哪个版本。

小开

我用这个为自己工作。

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

如果你们有人想找 鞋带 -4这里有

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

提交答案