Как сделать четыре изображения или divs заполнить экран

Я хотел бы иметь четыре цветных блока в моем содержании div. Каждый блок должен быть 50% от ширины и 50% от высоты контейнера: два сверху, а два внизу.Как сделать четыре изображения или divs заполнить экран

При повторной калибровке браузера они должны быть изменены вместе с ним.

Я попытался сделать четыре элемента div с высотой и шириной 50%, и я попытался разместить четыре изображения с высотой и шириной 50%.

Последний, похоже, работает, но масштабируется, сохраняя соотношение сторон, но я хочу, чтобы они растянулись, чтобы заполнить содержимое div.

источник

2013-03-21 redmac

Edit:

Там в 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

Спасибо. Это делает трюк для меня. – redmac

Как сделать четыре изображения или divs заполнить экран

ответ

Смежные вопросы