缩小到移动设备时，使图像在轮播中居中

Question

我试图在缩小到移动设备大小时使轮播图像保持居中，但它要么通过扭曲它来缩小它，保持高度但压缩宽度，或者如果我使用则只显示图片的左侧绝对。我需要它来显示图片的全高中心，同时只切掉边缘。它还需要在其顶部保留旋转木马字幕。我已经尝试了几个 d-block 或 d-flex 但没有任何效果。不要介意青蛙的东西，它只是一个地方填充物！

编辑：我设法通过更改 css 删除 height: 32rem 当小于 950px 时，保持图片的纵横比缩小。我仍然想保留图像的高度并在图像缩小时裁剪边缘，但找不到任何方法。它是否需要放在某种固定容器中并使用适合物体的盖子并让它裁剪？我可以在轮播容器内使用什么容器？我真的很陌生！

  <div class="carousel-inner">
  <div class="carousel-item active">
   

<img class="d-flex justify-content-center" src="Images/Kermit.JPEG" alt="kermit looking 
 christmassy with his hat on">
    <div class="container">
      <div class="carousel-caption text-start">
        <h1>Got a frog fetish?</h1>
        <p>You've come to the right place!</p>
        <p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
      </div>
    </div>
  </div>

  <div class="carousel-item">

    <img class="d-block w-100" src="Images/kermitsnow.JPEG" alt="kermit in the snow">

    <div class="container">
      <div class="carousel-caption">
        <h1>Chilly frogs your fetish?</h1>
        <p>Come see our videos of snow frogs</p>
        <p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
      </div>
    </div>
  </div>

css:

  @media only screen and (max-width: 950px){
.carousel-item > img {
position: absolute;
max-width: 100%;
top: 0;
left: 0;
}
}

@media only screen and (min-width: 951px){
.carousel-item > img {
position: absolute;
max-width: 100%;
top: 0;
left: 0;
height: 32rem;
}
}

Answer 1

使用 Carousels 的假设是您可以控制图像，因此可以对宽度和高度等事物进行标准化——我假设在这种情况下并非如此 （否则您只需编辑图片并将它们裁剪成至少具有相同的高宽比）.

这里的难题是居中是事物所在容器的函数，因此在这种情况下，您需要将 <img> 包装在 <div> 中并操纵其 CSS 使其居中并用 CSS max-height: 400px 限制其高度。但是对于高度大于宽度的图像，您会居中，但裁剪后仅显示图像的顶部。

实现灵活图像轮播的一种方法是使用 CSS background-image 来控制大小和位置。在你的情况下，我会指定旋转木马运行的高度，例如400px，然后使用透明的 1x1 像素建立图像。然后，您可以使用 CSS 通过 background-image: url() CSS.

来处理图像

试试这个 HTML:

<div id="carouselExample1" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">

    <div class="carousel-item active">
      <img id="img1" class="d-block w-100" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" height="400px">
      <div class="container">
        <div class="carousel-caption text-start">
          <h1>Got a frog fetish?</h1>
          <p>You've come to the right place!</p>
          <p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
        </div>
      </div>
    </div>

    <div class="carousel-item">
      <img id="img2" class="d-block w-100" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" height="400px">
      <div class="container">
        <div class="carousel-caption">
          <h1>Chilly frogs your fetish?</h1>
          <p>Come see our videos of snow frogs</p>
          <p><a class="btn btn-lg btn-primary" href="#">Click here to watch</a></p>
        </div>
      </div>
    </div>
    
  </div>
</div>

..用这个 CSS:

#img1, #img2 {
    background-position: center;
    Background-repeat: no-repeat;
    background-size: cover;
    /* ..OR..
    background-size: contain;
    background-color: #1f2227;
    */
}

#img1 {
    background-image: url(https://placekitten.com/640/360)
}

#img2 {
    background-image: url(https://placekitten.com/360/640)
}

（如果您使用动态 HTML 生成，则将 style="backgoround-image:url(xxx)" 属性注入 <img>。）

有关示例，请参阅 this JSFiddle。

缩小到移动设备时，使图像在轮播中居中

Keep image centered in carousel when shrunk to mobile

carousel

bootstrap-5