响应式网页设计，缩放带有始终完全可见页面的图像

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>