Question

随机地在两个图像下创建不同屏幕尺寸的间隙。我试图解决这个问题2/3天。但每次都失败。请帮我解决这个问题。相关代码如下图所示。< / p>

中屏尺寸问题：

大屏幕尺寸问题：

HTML：

<div class="section-three">
        <div class="container-fluid">
            <div class="row">
        <!---------------------- Left-Area -------------------> 
                <div class="s3-left col-sm-8">
                    <a href="#"><img src="images/logo4.png" alt="logo" class="img-responsive center-block"/></a>
                </div>
        <!-----------------------Right-Area ------------------->    
                <div class="s3-right col-sm-4">
                    <div class="container-fluid">
                        <div class="s3-right-up row">
                            <div class="container-fluid">
                                <div class="s3-logo row">
                                    <a href="#" target="_self">
                                        <img src="images/logo3.png" alt="logo" class="img-responsive center-block" style="width:32px; height:auto;"/>
                                    </a>
                                </div>
                                <div class="s3-heading row">
                                    <h5 class="text-uppercase text-center"> Vintage oliva </h5>
                                </div>  
                                <div class="s3-description row">
                                    <div class="gap">
                                        <p class="text-justify">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="s3-right-down row">
                            <div class="container-fluid">
                                <div class="s3-image row">
                                    <img src="images/background3.jpg" alt="logo" class="img-responsive"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS：

.section-three .s3-left.col-sm-8 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.s3-left {
    background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;
}
.s3-left img {
    width: 92px;
    padding: 199px 0;
}
.s3-image img {
    width: 100%;
}
.s3-logo {
    padding: 48px 0 25px;
}
.s3-heading h5 {
    margin: 0;
    padding: 0 0 10px;
}
.s3-description .gap {
    width: 80%;
    margin: auto;
}
.s3-description p {
    font-size: 12.4px;
    padding-bottom: 58px;
}

Answer 1

尝试将背景大小设置为：

.s3-left {
    background: url("images/background2.jpg") no-repeat 0 0 / 100% 100%;
    background-size: cover;
}

背景图像以不同的方式在不同的屏幕尺寸上创建不必要的间隙

1 个答案: