Как сделать div пропорционально текущим при масштабировании браузера?

Итак, я хочу, чтобы мой контент был разделен на 2 столбца, который заполняет весь «контейнер». Но я хочу, чтобы размер «335px X 250px» был пропорционально изменен при увеличении или уменьшении окна. Вот пример изображения того, как я хочу, чтобы он выглядел как изображение ниже, как я могу это сделать?Как сделать div пропорционально текущим при масштабировании браузера?

enter image description here

Ссылка JSFiddle: https://jsfiddle.net/gdkvcnyj/15/

<body> 
    <div id="body-wrap"> 
     <div id="mobilenav"></div> 
     <div class="content-wrap"> 
      <div id="container"> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div>   
      </div> 
     </div> 
    </div> <!-- end of Body Wrap --> 
</body>

источник

2015-05-29 billybobjones

изменили .mix элементы, чтобы использовать ширину в процентах вместо абсолютных значений. jsfiddle here.

Надеюсь, что это поможет.

источник

2015-05-29 08:25:42 Clay

Вещь в том, что я хочу, чтобы ширина и высота были пропорционально масштабированы. Не только ширина. – billybobjones

Высота более сложная, чем ширина. Вы можете просто установить свойство height элементов .mix в процентах, но это не будет работать во всех браузерах, плюс, если вы добавите больше контента, вам нужно будет продолжать изменять значение. Я думаю, что единственным вариантом будет использование javascript. Обновите jsfiddle: [https://jsfiddle.net/claytonF/gdkvcnyj/26/] – Clay

Хорошо, я понимаю. Спасибо :) – billybobjones

Вместо того чтобы делать заданные размеры изображения, используйте проценты, и браузер соответствующим образом отрегулирует. То же самое с высотой.

источник

2015-05-29 08:42:20 ETurns

Обратите внимание, что блок % пропорционален контейнеру div, а не окну просмотра. Похоже, вы хотите видеть.

Таким образом, для определения размера полностью пропорционально как ширину и высоту окна просмотра, вы хотите видовые экраны-относительных единиц: vw и vh. Обратите внимание, что browser support - это только недавние браузеры класса A, но если ваш прецедент может справиться с этим, это идеальный способ. Используйте их так же, как и блок %, просто зная, что они относительны не к контейнеру, а скорее к окну. Итак, если вы хотите, чтобы что-то всегда было на половину размера окна/окна просмотра, размер по обеим осям:

height: 50vh; 
width: 50vw;

источник

2015-05-29 08:49:29 XML

хм я вижу. Спасибо за ваше время! – billybobjones

Как сделать div пропорционально текущим при масштабировании браузера?

ответ

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