Вёрстка пропорциональных блоков

#css #вёрстка

Как сверстать 3 блока в относительных величинах,
чтобы они имели одинаковые пропорции с 1920px до 1024px?


    

Ответы

Ответ 1

Вариант с flex-box:



.wrapper {
  display: flex;
}
.wrapper:after {
  content: '';
  display:block;
  margin-top: 50%;
}
.red {
  background-color: red;
  width: 50%;
}
.wrap-right {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.wrap-right:before,
.wrap-right:after {
  content: '';
  display:block;
  width: 100%;
  flex-grow: 1;
}
.wrap-right:before {
  background-color: green;
}
.wrap-right:after {
  background-color: blue;
}

  

  




Ответ 2

Добавлю ещё короткое решение через flex.  Флекс использовать лучше всего, на дворе
2018 год: ничего так гибко и интуитивно не настраивается как флекс. Например можно
указать min-height у зелёного блока, и на определённом моменте ресайза окна он перестанет
сужаться, а если размер контейнера ограничить по высоте - то что не влазит будет перескакивать
из колонки в колонку.



body {
  display: flex;
  flex-flow: column wrap;
  height: 50vw;
}

.red {
  flex-basis: 100%;
  flex-grow: 1;
  background-color: red;
}

.green,
.blue {
  flex-basis: 50%;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

  
1
  
2
  
3



Ответ 3

html,
body {
  width: 100%;
  height: 100%;
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "box1 box2" "box1 box3";
}

#box1 {
  background-color: green;
  grid-area: box1;
}

#box2 {
  background-color: red;
  grid-area: box2;
}

#box3 {
  background-color: blue;
  grid-area: box3;
}





Ответ 4

Вариант с высотой от ширины (не зависит от ширины броузера):



.box {
  position: relative;
  width: 50%;
}

.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.ratio1_2:before {
  padding-top: 50%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.boxes>div {
  width: 50%;
  float: left;
  color: #FFF
}

.boxes>div:nth-child(1) {
  background: blue;
}

.boxes>div:nth-child(2) {
  background: red;
}

.boxes>div:nth-child(3) {
  background: green;
}

  

    
Aspect ratio of 1:1
  
  

    
Aspect ratio of 1:2
  
  

    
Aspect ratio of 1:2
  





Идея отсюда


Ответ 5

1. Самый простой вариант:



body {
  margin: 0;
}
div {
  width: 50%;
  height: 25vw;
  float: left;
}
.red {
  height: 50vw;
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}







2. Самый продвинутый вариант:



body{
  margin: 0;
}
.grid {
  display: grid;
  grid-template-areas: "a b"
                       "a d";
}
.red {
  grid-area: a;
  height: 50vw;
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}

   
Grid Item 1
   
Grid Item 2
   
Grid Item 3