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

Question

我想构建一个基本上由两个元素组成的网页：一个显示图像的区域和一个显示文本的区域。

无论页面大小如何，内容都应始终完全可见，外部没有任何东西，无需滚动。

应该有两种布局：

1. wide (for page widths > 800px)：左边的图片区域（页面宽度的75%），右边的文字区域（页面宽度的20%），都是页面高度的95%。
2. 窄：顶部的图像区域（页面高度的 75%），下方的文本区域（页面高度的 20%），均为页面宽度的 95%。

原始图像可以有不同的宽度和高度，比例可以不同，但​​是在显示时，它应该始终以最大可能的尺寸适合图像区域，居中（例如，1000x500px 的图像在 800x800px 中应该是 800x400px 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>