背景图像以不同的方式在不同的屏幕尺寸上产生不必要的间隙 [英] Background image is creating unnecessary gap at different screen size in different way

问题描述

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

中画面大小问题：

大屏幕尺寸问题：

HTML ：

 < div class =section-three> 
< div class =container-fluid> 
< div class =row> 
<！----------------------左侧区域------------------ - > 
< div class =s3-left col-sm-8> 
< a href =＃>< img src =images / logo4.pngalt =logoclass =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.pngalt =logoclass =img-responsive center-blockstyle =width：32px; height：auto;/> 
< / a> 
< / div> 
< div class =s3-heading row> 
< h5 class =text-uppercase text-center>复古oliva< / h5> 
< / div> 
< div class =s3-description row> 
< div class =gap> 
< p class =text-justify> 
 Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界的标准虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它做一个类型的标本书。它生存了。 
< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
< div class =s3-right-down row> 
< div class =container-fluid> 
< div class =s3-image row> 
< img src =images / background3.jpgalt =logoclass =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; 
} 
  

解决方案

尝试设置background-包括：

  .s3-left {
 background：url（images / background2.jpg）no-重复0 0/100％100％; 
 background-size：cover; 
} 
  

Randomly a gap is creating at different screen size below two image.I have tried to solve this problem for 2/3 days.But failed every time.Please help me to solve this problem.Related codes are given below image.

Problem at midium screen size:

Problem at large screen size:

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;
}

解决方案

Try setting the background-size to cover:

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

这篇关于背景图像以不同的方式在不同的屏幕尺寸上产生不必要的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！