如何让四个图像或 div 填满屏幕答案

【问题标题】：How to have four images or divs fill the screen如何让四个图像或 div 填满屏幕
【发布时间】：2013-03-28 14:22:25
【问题描述】：

我想在我的内容div 中有四个彩色块。每个块应该是容器宽度的 50% 和高度的 50%：两个在顶部，两个在底部。

在重新调整浏览器大小时，它们应该随之调整大小。

我尝试制作四个高度和宽度为 50% 的 div 元素，并尝试放置四个高度和宽度为 50% 的图像。

后者似乎可以工作，但在保持纵横比的同时进行缩放，但我希望它们拉伸以填充内容 div。

【问题讨论】：

标签： html css

【解决方案1】：

编辑：

无疑有一种更优雅的方式，但这会奏效：

<html><body>
<div style="position:absolute; left:0; top:0; width:50%; height:50%; background-color:blue">A</div>
<div style="position:absolute; left:50%; top:0; width:50%; height:50%; background-color:green">B</div>
<div style="position:absolute; left:0; top:50%; width:50%; height:50%; background-color:yellow">C</div>
<div style="position:absolute; left:50%; top:50%; width:50%; height:50%; background-color:red">D</div>
</body></html>

原文：

如果您希望图像拉伸以填充内容，则不可避免地会随着窗口大小的变化而改变纵横比。

听起来你真正想要的是让块保持相同的纵横比，但在窗口内缩放到尽可能大，必要时在底部或侧面留出额外空间。

看看this question.你可以设置一个具有你想要的纵横比的div，然后在内部将它分成四个部分。

【讨论】：

感谢您的回复。事实上，我不希望这些块保持相同的纵横比。但他们确实如此。所以我希望它们拉伸以填充内容 div 并保持相同的大小。