響應式網頁設計，縮放帶有始終完全可見頁面的圖像

Question

我想要構建一個基本上由兩個元素組成的網頁：顯示圖像的區域和顯示文本的區域。

無論頁面大小如何，內容都應該是完全可見的，沒有任何外部的情況下，無需滾動。

應該有兩個佈局：

1. 寬（對於頁面寬度> 800像素）：圖像在左側（頁面寬度的75％）區域，在右側（20％文本區域頁面寬度），都是頁面高度的95％。
2. 窄：圖像區域在頂部（頁面高度的75％），下面的文本區域（頁面高度的20％），都是頁面寬度的95％。

原始圖像可以有不同的寬度和高度，比例可以不同，但​​是在顯示時它應該始終適合圖像區域的最大可能大小，居中（例如1000x500px的圖像應該是800x400px在一個800x800px div，從上邊框200px）。

是否有沒有固定或顯式像素量的響應式解決方案？

如果不是，最好的解決方案是什麼？

Answer 1

您可以使用CSS媒體查詢和一些技巧來垂直和水平居中您的圖像。

像這樣：

.wrapper { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.image-container { 
 
    width: 75%; 
 
    height: 95%; 
 
    background: red; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.image-container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.text-container { 
 
    width: 20%; 
 
    height: 95%; 
 
    background: green; 
 
    float: right; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    .image-container { 
 
    float: none; 
 
    width: 95%; 
 
    height: 75%; 
 
    } 
 
    
 
    .text-container { 
 
    float: none; 
 
    width: 95%; 
 
    height: 20%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="image-container"> 
 
    <img src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/> 
 
    </div> 
 
    <div class="text-container"></div> 
 
</div>