如何並排引導圖像和文本，但是當屏幕很小時文本會越過圖像？

Question

基本上，我希望屏幕的一半是我的圖像，另一半是我的文字。但是，如果屏幕非常小，我希望文字覆蓋圖像並縮小圖像和文字。到目前爲止，我有大屏幕的工作，但是當我進入小屏幕時，文字仍然很大（使其離開屏幕），並且仍然在圖像的右側。

的.html：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-9 col-md-6"> 
      <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819"> 
     </div> 
     <div class="col-xs-3 col-md-6"> 
      <div class="first"> 
       NAME HERE 
      </div> 
      <div class="second"> 
       DEVELOPER 
      </div> 
     </div> 
    </div> 
</div> 

的.css

.first{ 
    font-family: Cinzel; 
    color: black; 
    font-size: 45px; 
    font-weight: normal; 
} 

.second{ 
    font-family: Cinzel; 
    color: black; 
    font-size: 20px; 
    font-weight: normal; 
} 

Answer 1

這是棘手，因爲你沒有指定你的「太小」或有多大你的當前圖像的意思回答。最小的設備可能是一箇舊的iPhone（320px）。以下工作適用於320px，但不低於此處的剩餘空間，以像素爲單位（百分比理想）。有一個jsbin here

.first { 
 
    font-family: Cinzel; 
 
    color: black; 
 
    font-size: 45px; 
 
    font-weight: normal; 
 
} 
 

 
.second { 
 
    font-family: Cinzel; 
 
    color: black; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
} 
 

 
@media screen and (max-width:320px) { 
 
    .first { 
 
    font-size: 16px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    left: 0!important; 
 
    margin-left: -300px; 
 
    color: white; 
 
    } 
 
    .second { 
 
    font-size: 10px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin-left: -300px; 
 
    color: white; 
 
    } 
 
}

<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.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-9 col-md-6"> 
 
      <img class="img-responsive" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2014/06/Brain.jpg" alt="Brain Image" width="960" height="819"> 
 
     </div> 
 
     <div class="col-xs-3 col-md-6"> 
 
      <div class="first"> 
 
       NAME HERE 
 
      </div> 
 
      <div class="second"> 
 
       DEVELOPER 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

你可以使用媒體查詢，並得到了圖像的文本。覆蓋位置屬性，如此處所示How to position text over an image in css

此外，不需要使用col-xs-9和col-xs-3。你可以使用col-xs-12。至少col-xs-3是不需要的（col-xs-9是一個選擇）。

類似的東西來此（未測試）：

<div class="container-fluid cntr"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6 image1"> 
      <img class="img-responsive" src="styles/pics/brainimg.png" alt="Brain Image" width="960" height="819"> 
     </div> 
     <div class="col-xs-12 col-md-6 text1"> 
      <div class="first"> 
       NAME HERE 
      </div> 
      <div class="second"> 
       DEVELOPER 
      </div> 
     </div> 
    </div> 
</div> 

@media screen and (max-width: 767px) { 
.cntr { 
    position: relative; 
} 
.image1 { 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.text1 { 
    position: absolute; 
    color: white; 
    font-size: 24px; 
    font-weight: bold; 
} 
}