如何讓四個圖像或div填充屏幕

我想在我的內容div中有四個彩色塊。每塊應該是容器寬度的50％和容器高度的50％：頂部兩個，底部兩個。如何讓四個圖像或div填充屏幕

當重新調整瀏覽器大小時，它們應該隨着它重新調整大小。

我試過做四個div元素，高度和寬度都是50％，我試着放置四個圖片，高度和寬度都是50％。

後者似乎工作，但規模，同時保持長寬比，但我希望他們伸展填補內容股利。

2013-03-21 redmac

編輯：

有undoubtably一個更優雅的方式，但是這會工作：

<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，然後將其內部分割爲四個部分。

來源

2013-03-21 16:15:45

感謝您的回覆。事實上，我不希望塊保持相同的長寬比。但他們這樣做。所以我想讓它們伸展以填充內容div並且尺寸完全相同。 – redmac 2013-03-21 16:53:53

謝謝。這對我來說是個訣竅。 – redmac 2013-03-21 17:31:04

如何讓四個圖像或div填充屏幕

回答

相關問題