Как делать резиновые блоки по высоте?

153
07 марта 2022, 04:50

Надо создать такую структуру

Левое изображения имеет 960x960 и занимает 50% экрана, т.е сам экран 1920 (960*2). Но как быть, если экран будет 1600, тогда изображения будет занимать так же 50% и будет иметь 800px однако высоту я не могу подогнать под ширину. Можно ли сделать что бы высота была равна ширине(без js)?

Answer 1

А как вам такое? Я задал переменной gap расстояние между grid-элементами.
Почему-то эта штука начинает нормально работать тут, только когда откроешь её на весь экран с открытой консолью разработчика (у меня Google Chrome).
В редакторе на компьютере - всё отлично, можете сами проверить

UPD: заметил, что если кликать на выполнить код(с закрытой консолью), то рандомно, в какой то момент нету полосы прокрутки по ширине, но чаще прокрутка есть

Поясню, что накалякал:

:root {
  --gap: 10px;
}
.wrapper {
    display: grid;
    grid-gap: var(--gap);
    grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
    grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2);
}


в :root я задаю переменную --gap, равную 10px, чтобы использовать для отступа между grid-элементами.
.wrapper задаю, что это grid-сетка display: grid
Задаю отступ в 10px между grid-элементами, используя ранее объявленную переменую grid-gap: var(--gap)

grid-template-rows отвечает за размер элементов по вертикали
grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2)
Нам нужно задать, что высота каждого элемента равна будет равна 1/4 от ширины экрана или 25vw, но у нас также есть отступ в 10px между элементами по вертикали. Чтобы убрать эти 10px, нужно их вычесть из всех ширин, а точнее - первому и второму элементу по вертикали вычесть 10px/2, получится, что у каждого вычли по 5px, в сумме 10px.

grid-template-columns задаёт размер элементов по горизонтали
grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2)
Первый элемент по ширине можно считать за два обычных по 1/4 от ширины экрана. всего у нас 2 отступа по 10px, в сумме 20px, значит, чтобы всё было ровно, надо из каждого элемента вычесть 5px, а точнее, из первого вычесть два раза по 5 px calc(50vw - var(--gap)), а из второго и третьего по 5px просто calc(25vw - var(--gap)/2).


Первый элемент, чтобы был на всю высоту, нужно задать, что он начинается с первой линии grid-row-start: 1 и заканчивается на начале третьей линии grid-row-end: 3

.item:nth-child(1) {
    background-color: black;
    grid-row-start: 1;
    grid-row-end: 3;
    font-size: 30px;
    font-weight: bold;
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 
 
*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
 
body { 
    margin: 0; 
    color: black; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 
 
:root { 
  --gap: 10px; 
} 
 
.wrapper { 
    display: grid; 
    grid-gap: var(--gap); 
    grid-template-rows: calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2); 
    grid-template-columns: calc(50vw - var(--gap)) calc(25vw - var(--gap)/2) calc(25vw - var(--gap)/2); 
} 
 
.item { 
    background-color: orange; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: white; 
    white-space: nowrap; 
    overflow-x: hidden; 
} 
 
.item:nth-child(1) { 
    background-color: black; 
    grid-row-start: 1; 
    grid-row-end: 3; 
    font-size: 30px; 
    font-weight: bold; 
}
<div class="wrapper"> 
    <div class="item">I am Black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
</div>

Можно сделать также без отступов, тогда не надо будет ничего считать

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 
 
*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
 
body { 
    margin: 0; 
    color: black; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 
 
.wrapper { 
    display: grid; 
    grid-template-rows: 25vw 25vw; 
    grid-template-columns: 50vw 25vw 25vw; 
} 
 
.item { 
    background-color: orange; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: white; 
    white-space: nowrap; 
    overflow-x: hidden; 
} 
 
.item:nth-child(1) { 
    background-color: black; 
    grid-row-start: 1; 
    grid-row-end: 3; 
    font-size: 30px; 
    font-weight: bold; 
} 
 
.item:nth-child(3) { 
    background-color: #2e5fc1; 
} 
 
.item:nth-child(4) { 
    background-color: #2e5fc1; 
}
<div class="wrapper"> 
    <div class="item">I am Black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
    <div class="item">I am not black</div> 
</div>

Вот этот вариант вроде работает в IE11. Вы можете использовать также autoprefixer, чтобы добавить к своему коду нужные префиксы

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); 
 
*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
 
body { 
    margin: 0; 
    color: black; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
} 
 
.wrapper, .wrapper__2, .wrapper__3, .wrapper__4, .item { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
} 
 
.wrapper__2 { 
    flex-direction: column; 
} 
 
.item { 
    background-color: orange; 
    justify-content: center; 
    align-items: center; 
    color: white; 
    white-space: nowrap; 
    overflow-x: hidden; 
    height: 100%; 
} 
 
.wrapper__1 .item { 
    background-color: black; 
    width: 50vw; 
    height: 50vw; 
    font-size: 30px; 
    font-weight: bold; 
} 
 
.wrapper__2 .item { 
    height: 25vw; 
    width: 25vw; 
} 
 
.wrapper__3 .item:nth-child(1),  
.wrapper__4 .item:nth-child(2) { 
    background-color: #2e5fc1; 
}
<div class="wrapper"> 
 
    <div class="wrapper__1"> 
        <div class="item">I am Black</div> 
    </div> 
    <div class="wrapper__2"> 
         
        <div class="wrapper__3"> 
            <div class="item">I am not black</div> 
            <div class="item">I am not black</div> 
        </div> 
        <div class="wrapper__4"> 
            <div class="item">I am not black</div> 
            <div class="item">I am not black</div> 
        </div> 
 
    </div> 
 
</div>

Answer 2

Решение на CSS

* { 
  margin: 0; 
  padding: 0; 
} 
 
.block__left, 
.wrp { 
  width: 50%; 
  display: inline-block; 
  float: left; 
} 
 
.block__left__ok, 
.wrp__ok { 
  width: 100%; 
  padding-top: 50%; 
  padding-bottom: 50%; 
} 
 
.wrp__ok { 
  padding: 0; 
} 
 
.block__01, 
.block__02, 
.block__03, 
.block__04 { 
  width: 50%; 
  display: inline-block; 
  float: left; 
} 
 
.block__01__ok, 
.block__02__ok, 
.block__03__ok, 
.block__04__ok { 
  width: 100%; 
  background: red; 
  padding-top: 50%; 
  padding-bottom: 50%; 
} 
 
.block__left__ok { 
  background-color: red; 
} 
 
.block__01__ok { 
  background-color: blue; 
} 
 
.block__02__ok { 
  background-color: chocolate; 
} 
 
.block__03__ok { 
  background-color: green; 
} 
 
.block__04__ok { 
  background-color: gold; 
}
<div class="block__left"> 
  <div class="block__left__ok"></div> 
</div> 
<div class="wrp"> 
  <div class="wrp__ok"> 
    <div class="div block__01"> 
      <div class="div block__01__ok"></div> 
    </div> 
    <div class="div block__02"> 
      <div class="div block__02__ok"></div> 
    </div> 
    <div class="div block__03"> 
      <div class="div block__03__ok"></div> 
    </div> 
    <div class="div block__04"> 
      <div class="div block__04__ok"></div> 
    </div> 
  </div> 
</div>

Решение на jQuery

$(function() { 
  $('.block__left, .wrp').height($('.block__left, .wrp').width() / 1); 
  $('.div').height($('.div').width() / 1); 
  $(window).resize(function() { 
    $('.block__left, .wrp').height($('.block__left, .wrp').width() / 1); 
    $('.div').height($('.div').width() / 1); 
  }); 
});
* { 
  margin: 0; 
  padding: 0; 
} 
 
.block__left, 
.wrp { 
  width: 50%; 
  display: inline-block; 
  float: left; 
} 
 
.div, 
.block__01, 
.block__02, 
.block__03, 
.block__04 { 
  width: 50%; 
  display: inline-block; 
  float: left; 
} 
 
.block__left { 
  background-color: red; 
} 
 
.block__01 { 
  background-color: blue; 
} 
 
.block__02 { 
  background-color: chocolate; 
} 
 
.block__03 { 
  background-color: green; 
} 
 
.block__04 { 
  background-color: gold; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="block__left"></div> 
<div class="wrp"> 
  <div class="div block__01"></div> 
  <div class="div block__02"></div> 
  <div class="div block__03"></div> 
  <div class="div block__04"></div> 
</div>

READ ALSO
Как сделать вращающийся слайдер?
HTML

Как сделать вращающийся слайдер?

Возникла такая проблемаПишу на ванильном js, нужен слайдер как нарисовал дизайнер с анимацией прокручивания

 91
document.getElementById возвращает null
HTML

document.getElementById возвращает null

Пишу расширение для браузера popupjs

 150
Изображение залезло на border
HTML

Изображение залезло на border

Всем привет имею изображениеСделал его ширину и высоту в процентах,

 188
QT 5.14, qml; Браузер при открытии любого сайта завершается
c++

QT 5.14, qml; Браузер при открытии любого сайта завершается

Проблема в браузере на qml

 128