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

Question

有一个块占据了屏幕宽度的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>

Answer 1

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

cover覆盖该区域contain将图像(不裁剪(调整到区域

或者，您可以选择不同的路线，并使用对象拟合：包含：

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