我想在我的内容中有四个彩色块div。每个块应该是容器宽度的 50% 和高度的 50%：两个在顶部，两个在底部。
重新调整浏览器的大小时，它们应该随之重新调整大小。
我尝试制作四个div高度和宽度为 50% 的元素，并尝试放置四个高度和宽度为 50% 的图像。
后者似乎可以工作，但在保持纵横比的同时可以缩放，但我希望它们拉伸以填充内容 div。
问问题
157 次
1 回答
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>
原来的：
如果您希望图像拉伸以填充内容，则不可避免地会随着窗口大小的变化而改变纵横比。
听起来您真正想要的是让块保持相同的纵横比，但在窗口内缩放到尽可能大，必要时在底部或侧面留出额外空间。
看看这个问题。您可以使用所需的纵横比设置单个 div，然后在内部将其拆分为四个部分。
于 2013-03-21T16:15:45.787 回答