twitter-bootstrap 具有设置高度的 Bootstrap 4 响应式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48391984/
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
Bootstrap 4 responsive image with set height
提问by Retros
If I have a card inside a column, that needs to have an image with a set height, how do I make it not stretched out, as it currently is in my code example? And without having to have a set width on the image because I want it to be replaceable.
如果我在一列内有一张卡片，它需要有一个具有设定高度的图像，我如何使它不会像当前在我的代码示例中那样被拉伸？并且不必在图像上设置宽度，因为我希望它是可替换的。
What am I missing and/or doing wrong? Thanks!
我错过了什么和/或做错了什么？谢谢！
.card-block {
padding: 20px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap" height="200">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>回答by Smokey Dawson
Your best solution is to instead of placing the image directly onto the page you can create an empty div and then set the background image to be https://placeimg.com/640/480/animalsthen set its size to cover and then it will cover the height and width of the div you have specified
您最好的解决方案是，不要将图像直接放在页面上，您可以创建一个空的 div，然后将背景图像设置为https://placeimg.com/640/480/animals，然后将其大小设置为覆盖，然后将其设置为将覆盖您指定的 div 的高度和宽度
so for example...
所以例如...
css
css
card-image-container{
background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
background-size: cover;
}
回答by WebDevBooster
Making an image responsive in Bootstrap 4 is very easy:
在 Bootstrap 4 中制作响应式图像非常简单：
You just add the img-fluidclass to the image.
您只需将img-fluid类添加到图像中。
HOWEVER... responsiveness comes at a cost and that is: You cannot set a minimum height for a responsive image (because that in itself would make the image non-responsive).
然而......响应是有代价的，那就是：你不能为响应图像设置最小高度（因为这本身会使图像无响应）。
Luckily, there are a few workarounds for managing the size of your card image while still keeping it responsive. You can do that by manipulating the horizontal padding (use the px-*class and swap the * for a number between 0 and 5) as well as increasing or decreasing the column width.
幸运的是，有一些解决方法可以管理卡片图像的大小，同时仍然保持响应。您可以通过操作水平填充（使用px-*类并将 * 交换为 0 到 5 之间的数字）以及增加或减少列宽来实现。
Take a look at the 3 examples here:
看看这里的 3 个例子：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row mt-3">
<div class="col-md-6">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Column with px-5 class</p>
<p class="card-subtitle">to make the image smaller</p>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-5 px-5">
<div class="card">
<img class="card-img-top img-fluid" src="https://placeimg.com/640/480/animals" alt="Card image cap">
<div class="card-block text-center">
<p class="card-text">Smaller column AND px-5 class</p>
<p class="card-subtitle">to make the image even smaller!</p>
</div>
</div>
</div>
</div>
</div>回答by Nikola Seke
Usually, when using Bootstrap you should use div with the class of container or container-fluid and after that div with the class of row. This worked for me
通常，在使用 Bootstrap 时，您应该将 div 与容器或容器流体的类一起使用，然后在该 div 与行的类中使用。这对我有用
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<img class="card-img-top" src="https://placeimg.com/640/480/animals"
alt="Card image cap" height="200">
<div class="card-body text-center">
<p class="card-text">Text goes here</p>
<p class="card-subtitle">More text goes here</p>
</div>
</div>
</div>
</div>
</div>
Cards know to be pain in the.. But I hope this helps.
卡片知道是痛苦的。但我希望这会有所帮助。
