旋转木马引导中的拉伸图像 [英] stretched image in carousel bootstrap

问题描述

我正在使用Bootstrap4.那里有一个带有图片的轮播.图像一直处于拉伸状态.出了什么问题.

I am using Bootstrap 4. There I have a carousel with picture. The images keep showing stretched. Idk what's the problem.

.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>

它看起来像这样:

原始图片如下所示:

The original pic looks like this:

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

Can someone please help me to solve this problem?

推荐答案

不是使用object-fit: contain !important;，而是尝试使用object-fit: cover !important;来达到预期的效果吗?

Instead of using object-fit: contain !important;, have you tried using object-fit: cover !important; to achieve your desired effect?

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

I am assuming you are wanting to place the background in a position where it will cover from left to right as well as top to bottom without morphing the image? For this I use background-size: cover; or object-fit: cover;.

这篇关于旋转木马引导中的拉伸图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！