轮播引导程序中的拉伸图像答案

【问题标题】：stretched image in carousel bootstrap轮播引导程序中的拉伸图像
【发布时间】：2019-03-11 07:01:55
【问题描述】：

我正在使用 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>

看起来像这样：

原图是这样的：

有人可以帮我解决这个问题吗？

【问题讨论】：

你有一个拼写错误，在 css 中使用 object-fit: contain !important; 而不是 object-fit: containt !important;
仍然显示同样的问题：/
codepen.io/leenmalka/pen/eXRaqz
它工作了，但现在它不是旋转木马的全尺寸。
@לבנימלכה 我希望它采用完整尺寸作为轮播，如下所示：codepen.io/zenunbeh/pen/rRwEym。但是图像被拉伸了

标签： css html twitter-bootstrap bootstrap-4

【解决方案1】：

您是否尝试过使用object-fit: cover !important;而不是object-fit: contain !important;来达到您想要的效果？

我假设您希望将背景放置在从左到右以及从上到下覆盖而不变形图像的位置？为此，我使用background-size: cover; 或object-fit: cover;。

【讨论】：

【解决方案2】：

你可以改变img height yo auto的值

.carousel-inner img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto
  object-fit: containt !important;
  display: block;
}

或添加宽度自动并保持高度值：

.carousel-inner img {
  ....
  height: 32rem;
  ....
  width : auto; /* or 100% */
}

【讨论】：