调整浏览器大小时的图像裁剪答案

【问题标题】：Image crops upon resizing the browser调整浏览器大小时的图像裁剪
【发布时间】：2020-03-10 00:56:51
【问题描述】：

我创建了一个简单的幻灯片，但在调整浏览器大小时。图像被裁剪。我尝试了所有不同的方法，但都无法成功。

这是一个html代码示例：

 <div class="carousel">
        <i class="fas fa-chevron-left" id="prevBtn"></i>
        <i class="fas fa-chevron-right" id="nextBtn"></i>
        <div class="carousel-inner">
            <div class="slide-item">
                <div class="caption">
                    <h1>First Slide</h1>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
                </div>
                <img src="https://www.w3schools.com/bootstrap4/ny.jpg" width="100%" alt="">
            </div>
        </div>
           ...
  </div>

这里是css代码：

.carousel {
  position: relative;
  width: 992px;
  height: 400px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  .carousel-inner {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0px auto;
    .slide-item {
      position: relative;
      display: inline-block;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      align-items: center;
      img {
        width: 992px;
        // height: 400px;
      }
      ... 

@media (max-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 540px;
  }
}
@media (min-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 540px;
  }
}

幻灯片在更大的屏幕上看起来不错，但随着我们缩小浏览器图像的大小，图像会被裁剪。这是codepen。希望有人能在这里解决，谢谢。

【问题讨论】：

嗨，我不确定你期望发生什么？您希望图像居中并裁剪，还是希望图像缩小？
我希望它缩小，但我不希望它被裁剪
w3schools.com/bootstrap4/bootstrap_carousel.asp 请看这个链接，有一个引导幻灯片，图像在调整大小时不会裁剪

标签： html css

【解决方案1】：

在手机上试试max-width: 100%

@media (max-width: 576px) {
  .container,
  .carousel,
  .carousel-inner,
  .slide-item {
    max-width: 100%;
  }

DEMO HERE

【讨论】：

您可以看到您提供的演示，因为我缩小了浏览器的大小，图像仍在裁剪。