css - 轮播引导程序中的拉伸图像
问题描述
我正在使用 Bootstrap 4。我有一个带图片的轮播。图像一直显示拉伸。我知道有什么问题。
.carousel {
margin-bottom: 4rem;
position: relative;
}
.carousel-caption {
bottom: 3rem;
z-index: 10;
}
.carousel-inner img {
position: absolute;
top: 0;
left: 0;
height: 32rem;
object-fit: containt !important;
display: block;
}
.carousel-item {
height: 32rem;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima.</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
<div class="carousel-item col-xs-12 col-sm-12">
<img src="https://i.stack.imgur.com/cPtnU.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, minima</p>
</div>
</div>
</div>
</div>
它看起来像这样:
有人可以帮我解决这个问题吗?
解决方案
而不是 using object-fit: contain !important;
,您是否尝试过 usingobject-fit: cover !important;
来达到您想要的效果?
我假设您想将背景放置在从左到右以及从上到下覆盖而不变形图像的位置?为此,我使用background-size: cover;
or object-fit: cover;
。
推荐阅读
- linux - 中断信号后在函数中使用参数
- ruby-on-rails - 在 Kubenetes 的 Rails 中通过 mcrouter 访问 Memcached
- reactjs - 如何在内容之后重复一个字符并将其填充到 100% 的宽度?JSX/反应
- google-maps - 谷歌应用程序脚本:从地图中获取 poi 数据
- oracle-cloud-infrastructure - 不能让防火墙在 Oracle Cloud 上通过端口 8065
- java - 使用 maven 为多个环境生成战争?
- r - RStudio config.log 文件不存在
- php - 如何减少多余的代码行?(php)
- c++ - 在 Windows GUI 中更改静态文本框的字体大小
- scala - 与火花映射列中的最大值对应的键