Question

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

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

应该有两种布局：

宽（页面宽度> 800px）：左侧的图像区域（页面宽度的75％），右侧的文本区域（页面宽度的20％），均为页面高度的95％
narrow：顶部的图像区域（页面高度的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>

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

1 个答案: