缩小到移动设备时保持图像在轮播中居中

问题描述

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

编辑：我设法保持图片的纵横比，因为它通过更改 css 来删除高度：小于 950 像素时的 32rem。我仍然想保留图像的高度并在缩小时裁剪边缘，但找不到任何方法。它是否需要放在某种固定容器中并使用适合对象的封面并让它裁剪？我可以在转盘容器内使用什么容器？我真的很陌生！

  <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;
}
}

解决方法

使用 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 示例。

bootstrap-5 carousel