Html 如何将图像放入 bootstrap div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48482944/
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
How to fit the image inside the bootstrap div?
提问by user1770268
I am using the div like below
我正在使用如下所示的 div
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>
User will upload any kind of image. So i need to fit the image inside the div it means i need to cover the full div using image..I am using bootstrap please advise.
用户将上传任何类型的图像。所以我需要将图像放入 div 中，这意味着我需要使用图像覆盖整个 div。我正在使用引导程序，请提供建议。
回答by Zahidul Islam Ruhel
Just add you images width to 100%.
只需将您的图像宽度添加到 100%。
But as you are saying user will upload various kind of images, so can use object-fitproperty.
但是正如您所说，用户将上传各种图像，因此可以使用object-fit属性。
Add the CSS like this:
像这样添加 CSS：
.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>
You will find the details about object-fitand object-positionhere : https://css-tricks.com/on-object-fit-and-object-position/
您将在此处找到有关object-fit和的详细信息object-position：https: //css-tricks.com/on-object-fit-and-object-position/
回答by Dawit Abraham
For Bootstrap 4 users,this works
对于 Bootstrap 4 用户，这有效
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-fluid">
</div>
回答by Pranav Totla
It is safe to assume that by fittingyou mean covering all of the width. This is because
可以安全地假设，拟合意味着覆盖所有宽度。这是因为
- You typically do not know the height just by using
col-sm-6orcol-md-6orcol-lg-4. - There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.
- 您通常不知道仅使用
col-sm-6或col-md-6或的高度col-lg-4。 - 如果您尝试根据自己的意愿调整大小，则图像的纵横比很有可能会丢失。
Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" />for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.
使用<img src = "images/dummy_image.png" class = "img-responsive" width = "100%" />用于安装列。这将使您的图像宽度适合列并自动修改高度（记住纵横比），因此您不必担心图像不合逻辑地调整大小。
