调整和图像大小，以适应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; }
您可以明确定义图像的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>
只需将img-responsive添加到您的img标签中，就可以在bootstrap 3以后使用！
祝你好运 ：）
我有这个相同的问题，并偶然发现了下面的简单的解决scheme。 只需添加一些填充图像，并调整自己的大小，以适应div。
<div class="col-sm-3"> <img src="xxx.png" class="img-responsive" style="padding-top: 5px"> </div>
Bootstrap 4现在使用img-fluid而不是img-responsive ，所以请仔细检查一下你使用的版本是否有问题。
大多数情况下，bootstrap项目使用jQuery，所以你可以使用jQuery。
只需使用JQuery.offsetHeight()和JQuery.offsetWidth()获取父类的宽度和高度，并使用JQuery.offsetHeight()和JQuery.offsetWidth()将它们设置为子元素。
如果你想让它响应，重复$(window).resize(func)的上述步骤。
