調整大小窗口，並確保圖片和文字都是正確的大小

Question

試圖操縱與周圍的@media規則調整後的畫面時

我所試圖做的是有一個形象佔據屏幕的66.7％，當我在一臺大顯示器上時，右邊的文字可以讓我休息。我把所有東西都包裝在一行然後列。當我將屏幕大小調整爲平板電腦大小或移動設備時，我希望圖像佔用寬度的100％，文本顯示在圖像下方並居中。我的問題不確定當屏幕縮小時，文本列（col-lg-4）不會移動到圖像下方屏幕的左側的位置，而是將其精確設置爲什麼尺寸。

這裏是我的HTML：

<div class="row"> 
    <div class="col-lg-8 img-example">    
     <div class="img-responsive" style="background-image: url(3.jpg'); background-size: cover; background-position: 47.5% 42.675%; background-repeat: no-repeat; padding-bottom: 80%; min-height: 100%; max-width: 100%;"> 
     </div> 
    </div> 
    <div class="col-lg-4"> 
     <div class="content"> 
      <h3 class="center-align">Hello</h3> 
      <br /> 
      <h4 class="center-align">Hi</h4> 
      <br /> 
     </div> 
    </div> 
</div> 

CSS：

.img-example{ 
    width: 66.667%; 
    position: relative; 
} 

@media screen and (max-width: 800px){ 
    .img-example { 
     width: 100%; 
     position: relative; 
     max-height: 100vh; 
     overflow: hidden; 
    } 

} 

@media screen and (min-width: 801px){ 
    .img-example .img-responsive{ 
     padding-bottom: 0!important; 
     min-height: 100%; 
     position: fixed; 
    } 
} 

.content { 
padding: 150px 0 10px 0; 
color: #c0d1ca 
} 

任何幫助，將不勝感激。

謝謝

Answer 1

不需要媒體查詢，bootstrap網格系統就是您所需要的。

REF：https://v4-alpha.getbootstrap.com/layout/grid/

同時添加text-align: center;父元素將圍繞孩子。如果您將text-align: center;添加到孩子，它不會居中。

.img-example { 
 
    position: relative; 
 
    background-image: url(http://placehold.it/500x500); 
 
    background-size: cover; 
 
    background-position: 47.5% 42.675%; 
 
    background-repeat: no-repeat; 
 
    padding-bottom: 80%; 
 
    min-height: 100%; 
 
    max-width: 100%; 
 
} 
 

 
.content { 
 
    padding: 150px 0 10px 0; 
 
    color: #c0d1ca; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-lg-8 img-example"> 
 
    </div> 
 
    <div class="col-lg-4 content"> 
 
    <h3>Hello</h3> 
 
    <br /> 
 
    <h4>Hi</h4> 
 
    <br /> 
 
    </div> 
 
</div>