容器內容更改窗口大小比例

網頁看起來很好。但是，當更改我的瀏覽器窗口大小時，容器的內容會上下移動。因此它要麼留下很多容器可用空間，要麼就會消失（就像下一個容器一樣）。容器內容更改窗口大小比例

但我想它總是以相同的比例在容器內。

這裏是我的代碼：

.first { 
 
    padding-left: 5%; 
 
    } 
 

 
    .second { 
 
     padding: 80px 50px 0px 70px; 
 
     background-size: cover; 
 
    } 
 

 
    .fourth { 
 
     margin-top: 7%; 
 
    } 
 

 
    .third { 
 
    padding-top: 80px; 
 
      padding-bottom: 65px; 
 
      height: 678px; 
 
      position: relative; 
 
      width: 100%; 
 
      min-height: auto; 
 
      overflow-y: hidden; 
 
      background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg"); 
 
      background-size: cover; 
 
    } 
 

 
    .selling-text { 
 
     font-family: Ubuntu; 
 
     font-size: 20px; 
 
     padding-top: 27%; 
 
     text-align: center; 
 
     color: black; 
 
     margin-left: 2%; 
 
    } 
 

 

 
    .second-block { 
 
     background: #F2EADC; 
 
     height: 500px; 
 
     background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg"); 
 
     background-size: cover; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="third container-fluid"> 
 
    <div class="col-md-6"> 
 
     <div class="device"> 
 
      <div class="screen"> 
 
       <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! --> 
 
       <img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt=""> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6"> 
 
     <div class="second"> 
 
      <img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt=""> 
 
      <div class="fourth"> 
 
       <button type="button" class="button btn-block">MENU</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="second-block container-fluid"> 
 
    <div class="col-md-6"> 
 
     <div class="screen"> 
 
      <p class="selling-text"> 
 
       See the best cake recipes. 
 
       Trusted recipes for chocolate cake, 
 
       white cake, banana cakes, 
 
       and carrot cakes with photos and 
 
       tips from home cooks. 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-6 second"> 
 
     <div class="videoWrapper shadow"> 
 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe> 
 
     </div> 
 
    </div> 
 

 
</div>

我不知道爲什麼的jsfiddle不使用jQuery 1.11.1工作，它看起來從我看到的本地連接它的不同。

來源

2016-11-25 Lera Zemlyanaya

好的，我認爲問題是您的<div class="third container-fluid">的固定高度，其高度爲678px。更具體地說：當你調整窗口大小時，當列移動時，固定高度會成爲一個問題，因爲你的容器的px比你的子元素 - col的組合高度要小。

這裏是一個JSFiddle，我剛纔註釋掉的固定高度

來源

2016-11-25 21:26:55 tech4242

哦，這就是它！非常感謝你！你幫了我很多！ –

@LeraZemlyanaya我很高興我可以幫助你:)我想這是你曾經做過的那些事情之一，然後記住 – tech4242

是的，確切的！ :) –

容器內容更改窗口大小比例

回答

相關問題