Адаптивный CSS Размер изображения влияет на размеры строк - PullRequest
Новая
       13

Адаптивный CSS Размер изображения влияет на размеры строк

1 голос
/ 26 июня 2019

Я знаю, это звучит так, как будто меня об этом спрашивали раньше, но я поиграл со многими приемами, которые я нашел из других вопросов, и, кажется, ничто не дает желаемого эффекта, который мне нужен.

Япытаясь создать что-то, что будет отзывчивым, как это: Отзывчивый пример gif

Мне в основном нужно, чтобы изображение было отцентрировано, где оно имеет размер 100%.

Вот что я пытался получить этот эффект:

Сначала я создал div, содержащий три дочерних элемента div для «столбцов».Затем внутри центрального столбца я сделал три дочерних элемента для «строк».Теперь мне нужно, чтобы изображение заполняло максимально допустимую ширину, сохраняя при этом квадратное соотношение сторон.Также высота изображения должна определять высоту верхнего и нижнего рядов.

Тогда нужно просто выровнять текст внутри верхнего и нижнего ряда относительно нижнего и верхнего их элементов соответственно.

Это будет выглядеть примерно так:

HTML Визуализация столбцов

HTML Визуализация центральных строк

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

Я пытался ...

  • Flexbox
  • , используя vh (высота просмотра)
  • и немного используя calc (), ноне повезло
  • Установка соотношения сторон с помощью padding-top: 100%

Как выглядит код 

/* .row & .col from materialize.css */

.full {
  height: 100vh;
}

.art_top {
  height: 10vh;
  /* I Don't actually want this fixed though */
  padding-bottom: 10px;
  display: flex;
}

.art_center {
  height: 80vh;
  /* I Don't actually want this fixed though */
}

.art_bottom {
  height: 10vh;
  /* I Don't actually want this fixed though */
  padding-top: 10px;
  display: flex;
}

#cover_art {
  width: 100%;
  height: 100%;
  background: center / cover no-repeat;
}

#song_name {
  align-self: flex-end;
}

#artist_name {
  align-self: flex-start;
}
<div class="row">
  <div class="col s2 m3 full"></div>
  <div class="col s8 m6 full">
    <div class="row art_top">
      <a id="song_name" class="bold-title"></a>
    </div>
    <div class="row art_center">
      <div id="cover_art"></div>
    </div>
    <div class="row art_bottom">
      <a id="artist_name" class="bold-title"></a>
    </div>
  </div>
  <div class="col s2 m3 full"></div>
</div>

1 Ответ

0 голосов
/ 26 июня 2019

Flexbox делает этот вид макета очень простым. Хитрость заключается в том, чтобы выборочно позволить элементам сгибаться или сжиматься.

Сокращение свойства flex принимает 3 значения для flex-grow, flex-shrink и flex-basis (начальная ширина или высота в зависимости от направления изгиба). Просто не забывайте, какие элементы div используются в качестве гибких контейнеров, когда вы будете вдаваться в детали макета. Очень часто встречаются div, которые являются одновременно flex-контейнерами и самими flex-элементами.

Я также рекомендую использовать элемент img вместо применения изображения в качестве фона, чтобы у вас не было проблем с соотношением сторон в адаптивных размерах окна.

Очень хороший ресурс: https://css -tricks.com / snippets / css / a-guide-to-flexbox / 

/* .row & .col from materialize.css */
body {
  margin: 0;
}
.full {
  height: 100vh;
}
.row {
  display: flex;
}
.column {
  flex: 1 1 auto;
}
.column2 {
  background: #b4c2cf;
  display: flex;
  flex-direction: column;
}
.column1 {
  background: #cbb3cc;
}

.column3 {
  background: #cbb2b2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art_top {
  flex: 1 0 10vh;
  display: flex;
  justify-content: flex-start
  align-self: flex-end;
}
.art_center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art_bottom {
  flex: 1 0 10vh;
  text-align: right;
}
#cover_art {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
#song_name {
  align-self: flex-end;
}
#artist_name {
  align-self: flex-start;
}
.bold-title {
  display: block;
  font-weight: bold;
  padding: 10px;
}
.small-box {
  background: #8f588c;
  height: 100%;
  max-height: 70px;
  width: 100%;
  max-width: 70px;
}
<div class="row full">
  <div class="column column1"></div>
  <div class="column column2">
    <div class="art_top">
      <a id="song_name" class="bold-title">My Album Title</a>
    </div>
    <div class="art_center">
      <img id="cover_art" src="https://picsum.photos/400" />
    </div>
    <div class="art_bottom">
      <a id="artist_name" class="bold-title">Artist Name</a>
    </div>
  </div>
  <div class="column column3">
    <div class="small-box"></div>
  </div>
</div>
...