为什么整个图像不适合块？

如何解决为什么整个图像不适合块？

有一个块占据了屏幕宽度的50％，并且在这个块中有一个带有图片幻灯片的猫头鹰轮播，但是鉴于该块是一个等宽的正方形，因此图片并未完全放置在此处和高度。 如何在不裁切块大小且完全适合块的情况下使图像合适？ 也许这与猫头鹰轮播功能有关？

.stucco-gal {
  width: 50%;
}

.img {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.pbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

<div class="gallery stucco-gal">
  <div class="owl-carousel">
    <div class="img">
      <div class="pbg" style="background-image: url(img/bg-1.jpg);"></div>
    </div>
    <div class="img">
      <div class="pbg" style="background-image: url(img/bg-6.jpg);"></div>
    </div>
    <div class="img">
      <div class="pbg" style="background-image: url(img/bg-7.jpg);"></div>
    </div>
    <div class="img">
      <div class="pbg" style="background-image: url(img/bg-8.jpg);"></div>
    </div>
  </div>
</div>

解决方法

您可以将background-size: cover;更改为contain

cover涵盖了该区域 contain调整图像（不裁剪）到该区域

或者，您可以走另一条路线并使用object-fit：contains：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

我还注意到，您调用图像的方式，background-repeat的默认设置为repeat，因此，请尝试添加：

background-repeat: no-repeat;

https://www.w3schools.com/CSSref/pr_background-repeat.asp