0

Как сделать так, чтобы высота flexbox менялась одновременно и пропорционально ширине этого бокса?

Ну и в идеале менялся бы размер текста, автоматически.

html:

<div class="main-news">
            <a href="#">/ Политика</a>
            <h3>
              В Крыму отреагировали<br>на слова Кравчука<br>о возврате полуострова
            </h3>
            <div class="main-news-props">
              <div class="main-news-date">
                19 Июня 2018
              </div>
              <div class="main-news-time">
                10:48
              </div>
            </div>
          </div>

css:

.main-news {
  display: flex;
  max-width: 460px;
  width: 100%;
  height: 320px;
  flex-shrink: 1;
  background-color: green;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.main-news a {
  font-size: 12px;
  text-decoration: none;
  color: black;
  margin-left: 20px;
}

.main-news h3 {
  font-size: 29px;
  font-weight: bold;
  color: black;
  margin-left: 20px;
  padding-bottom: 0;
  margin-top: 18px;
}

.main-news-props {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: black;
  margin-left: 20px;
  margin-bottom: 35px;
}

.main-news-date {
  margin-right: 20px;
}

.main-news-time {
  background-image: url(img/icon-time-white.png);
  background-repeat: no-repeat;
  background-position: left 1px;
  padding-left: 14px;
}

Ссылка на разметку и стили

1 ответ 1

0

Исправьте/добавьте в css «main-news» для соотношения блока следующий код:

height: calc((100vw - 4rem) * (320/460));
max-height: 320px;

Рабочий пример с соотношением:

.main-news {
  display: flex;
  max-width: 460px;
  width: 100%;
  height: calc((100vw - 4rem) * (320/460));
  max-height: 320px;
  flex-shrink: 1;
  background-color: green;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.main-news a {
  font-size: 12px;
  text-decoration: none;
  color: black;
  margin-left: 20px;
}

.main-news h3 {
  font-size: 29px;
  font-weight: bold;
  color: black;
  margin-left: 20px;
  padding-bottom: 0;
  margin-top: 18px;
}

.main-news-props {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  color: black;
  margin-left: 20px;
  margin-bottom: 35px;
}

.main-news-date {
  margin-right: 20px;
}

.main-news-time {
  background-image: url(img/icon-time-white.png);
  background-repeat: no-repeat;
  background-position: left 1px;
  padding-left: 14px;
}
<div class="main-news">
  <a href="#">/ Политика</a>
  <h3>
    В Крыму отреагировали<br>на слова Кравчука<br>о возврате полуострова
  </h3>
  <div class="main-news-props">
    <div class="main-news-date">
      19 Июня 2018
    </div>
    <div class="main-news-time">
      10:48
    </div>
  </div>
</div>

3
  • Это офигенно. Где можно прочитать про этот метод?
    – iAndyPC
    Commented 29 мая 2019 в 17:58
  • @iAndyPC я уже не помню. Но, тут фишка в расчете «calc». + свойствами max-h/w ограничение размера. Commented 29 мая 2019 в 19:04
  • @iAndyPC примерно таким методом можно и шрифты адаптировать + медиа запросы для эстетики. лучше обойтись только медиа запросами. Commented 29 мая 2019 в 19:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.