Html 调整和图像大小以适合 div（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16466240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjusting and image Size to fit a div (bootstrap)
提问by smilefreak24
I'm trying to get an image to fit within a specific size div. Unfortunately, the image isn't conforming to it and is instead proportionally shrinking to a size that isn't big enough. I'm not sure what the best way is to go about getting the image to fit inside it is.
我正在尝试使图像适合特定大小的 div。不幸的是，图像不符合它，而是按比例缩小到不够大的尺寸。我不确定让图像适合其中的最佳方法是什么。
If this isn't enough code, I'd be happy to supply more, and I'm open to fixing any other errors that I am overlooking.
如果这还不够代码，我很乐意提供更多代码，并且我愿意修复我忽略的任何其他错误。
Here is the HTML
这是 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>
My CSS
我的 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;
}
采纳答案by jterry
You can explicitly define the widthand heightof images, but the results may not be the best looking.
您可以明确定义图像的width和height，但结果可能不是最好看的。
.food1 img {
width:100%;
height: 230px;
}
...per your comment, you could also just block any overflow- see this exampleto see an image restricted by height and cut off because it's too wide.
...根据您的评论，您也可以只阻止任何overflow- 请参阅此示例以查看受高度限制并因太宽而被切断的图像。
.top1 {
height:390px;
background-color:#FFFFFF;
margin-top:10px;
overflow: hidden;
}
.top1 img {
height:100%;
}
回答by Shafeeque S
Try this way:
试试这个方法：
<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>
UPDATE:
更新：
In Bootstrap 4 img-responsivebecomes img-fluid, so the solution using Bootstrap 4 is:
在 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>
回答by Alex
Just a heads up that Bootstrap 4 now uses img-fluidinstead of img-responsive, so double check which version you're using if you're having problems.
只是提醒一下Bootstrap 4 现在使用img-fluid而不是img-responsive，所以如果遇到问题，请仔细检查您使用的是哪个版本。
回答by Shashi
Simply add the class img-responsiveto your imgtag, it is applicable in bootstrap 3 onward!
只需将该类添加img-responsive到您的img标签中，它就适用于 bootstrap 3 以后的版本！
回答by wiltonio
I had this same problem and stumbled upon the following simple solution. Just add a bit of padding to the image and it resizes itself to fit within the div.
我遇到了同样的问题，并偶然发现了以下简单的解决方案。只需向图像添加一些填充，它就会调整自身大小以适应 div。
<div class="col-sm-3">
<img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>
回答by alanHdez
I used this and works for me.
我使用了这个并且对我有用。
<div class="col-sm-3">
<img src="xxx.png" style="width: auto; height: 195px;">
</div>
回答by Dexter
If any of you looking for Bootstrap-4. Here it is
如果你们中有人在寻找Bootstrap-4。这里是
<div class="row no-gutters">
<div class="col-10">
<img class="img-fluid" src="/resources/img1.jpg" alt="">
</div>
</div>
回答by Mohsen
Most of the time,bootstrap project uses jQuery, so you can use jQuery.
大多数时候，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().
只是得到的宽度和家长的高度JQuery.offsetHeight()和JQuery.offsetWidth()，并将它们设置为子元素与JQuery.width()和JQuery.height()。
If you want to make it responsive, repeat the above steps in the $(window).resize(func), as well.
如果您想让它具有响应性，请在 中重复上述步骤$(window).resize(func)。
