如果我的列中有一张卡片,需要有一个具有设定高度的图像,我如何使其不被拉伸,就像我的代码示例中当前那样?并且不必在图像上设置宽度,因为我希望它是可替换的。
我错过了什么和/或做错了什么?谢谢!
.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>
您最好的解决方案是不要将图像直接放置到页面上,您可以创建一个空 div,然后将背景图像设置为 https://placeimg.com/640/480/animals 然后将其大小设置为覆盖然后它会覆盖你指定的div的高度和宽度
例如...
css
card-image-container{
background: url('https://placeimg.com/640/480/animals') 50% no-repeat;
background-size: cover;
}
在 Bootstrap 4 中制作响应式图像非常简单:
您只需将
img-fluid
类添加到图像中即可。
然而...响应能力是有代价的,那就是:您不能为响应图像设置最小高度(因为这本身会使图像不响应)。
幸运的是,有一些解决方法可以管理卡片图像的大小,同时保持其响应能力。您可以通过操纵水平填充(使用
px-*
类并将 * 替换为 0 到 5 之间的数字)以及增加或减少列宽来实现此目的。
看一下这里的 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>
通常,在使用 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>
卡片知道是痛苦的..但我希望这会有所帮助。