主页 / 问题 / 1204555
Accepted
Tempest
Asked:2021-11-14 21:23:02 +0000 UTC2021-11-14 21:23:02 +0000 UTC

如何将图像放入块中以使其不被切断？

  • 772

有一个灰泥块占据了屏幕宽度的 50%。在这个块里面是 owl-carousel 块，其中包含带有照片的滑块块。每个块滑块都是一个带有 img 类的块，其内部是一个带有 pbg 类的块，它有一个背景图像。为img和pbg块设置样式时，得到一个高宽相同的正方形，但是里面的图片不完全适合滑块块，被截断了。如何确保任何尺寸的图片均匀地位于滑块中并且不会同时被切断？也就是说，简单地说，有一个块占据了屏幕的一半，这个块是方形的，里面有一个猫头鹰旋转木马，我希望任何图片都适合这个方形块而不裁剪

.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-repeat: no-repeat
 }
<div class="stucco-gal">
                                        <div class="owl-carousel">
                                            <div class="img">
                                                <div style="background-image: url(img/bg-5.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-6.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-7.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-8.jpg);" class="pbg"></div>
                                            </div>
                                        </div>
</div>

html

1 个回答

  1. Best Answer

    用于 pbg 类：

    background-size: contain;

    如果您需要保存正方形，请使用：

    background-size: 100% 100%;

    但是，图像看起来会被拉伸。

    更多细节 - http://htmlbook.ru/css/background-size

    • 1

相关问题