当缩小到移动时，保持图像在转盘中居中

Question

当缩小到移动大小时，我试图保持转盘图像居中，但它要么通过扭曲图像来缩小图像，保留高度但压缩宽度，要么如果我使用绝对值，则只显示图片的左侧。我需要它来显示图片的中心全高，同时只切掉边缘。它还需要在顶部保留转盘标题。我试过几个d-block或d-flex，但都不起作用。别介意青蛙的东西，它只是一个填充物！

编辑：我已经设法在图片缩小时保持了纵横比，方法是更改css以删除高度：小于950px时为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;
}
}

Answer 1

使用旋转木马时，假设您可以控制图像，从而可以对宽度和高度等内容进行标准化——我认为在这种情况下并非如此(否则，您只需编辑图像并将其裁剪为至少具有相同的高宽比)。

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

实现灵活图像转盘的一种方法是使用CSSbackground-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>。)

有关示例，请参阅此JSFiddle。