我想在我的内容div中有四个彩色块。每个块应该是容器宽度的50％和容器高度的50％：两个在顶部，两个在底部。
在重新调整浏览器大小时，他们应该重新调整大小。
我尝试制作四个高度和宽度均为50％的div个元素，并尝试放置四个高度和宽度均为50％的图像。
后者似乎有效，但在保持纵横比的同时进行缩放，但我希望它们可以拉伸以填充内容div。
答案 0 :(得分：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，然后将其内部拆分为四个部分。