Блог

Главная - Вопросы по программированию - Flexbox: масштаб изображения пропорционально динамической родительской высоте

Flexbox: масштаб изображения пропорционально динамической родительской высоте

#css #flexbox

#css #flexbox

Вопрос:

Используя flexbox, я создал следующий макет для страницы профиля пользователя: Текущий результат

Как вы можете видеть, изображение выше, чем текст, к которому оно прикреплено.

Вместо этого я пытаюсь масштабировать его точно до размера текста слева от него: введите описание изображения здесь

 html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.padder-wrap {
  background: black;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.padder-content {
  background: grey;
  display: flex;
  padding: 1em;
}

.whoami {
  display: flex;
}

.whoami-names {
  display: flex;
  flex-direction: column;
}

.avatar {
  padding-left: 1em;
}


/* Decorative styles */

.padder-wrap {
  font-size: 18pt;
  font-family: sans-serif;
  line-height: 1;
}

.realname {
  font-size: 200%;
}

.nickname {
  color: #333;
  align-self: flex-end;
}

.social-links {
  text-align: right;
  padding-top: .3em;
}

.social-link {
  max-width: 1em;
}  
 <div class='padder-wrap'>
  <div class='padder-content'>
    <div class='whoami'>
      <div class='whoami-names'>
        <div class='realname'>John Doe</div>
        <div class='nickname'>johndoe</div>
        <div class='social-links'>
          <a href='https://linkedin.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
          <a href='https://github.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
          <a href='https://twitter.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
        </div>
      </div>
      <div class='avatar'>
        <img src='https://via.placeholder.com/150'>
      </div>
    </div>
  </div>
</div>

Текущий код здесь: https://jsfiddle.net/x91jhp27/32 /

Попытки до сих пор:

До сих пор я пробовал много разных вещей, используя только <img> тот же реквизит, что и при переносе <div> .

По какой-то причине кажется, что контейнер avatar либо игнорирует height , max-height либо вычисляет их на основе окна просмотра, а не родительского. position: relative это не исправлено.

Использование flex-basis: 0 with flex-grow: 1 (чтобы сделать изображение высотой 0, но позволить ему увеличиваться до заполнения) также не сработало, поскольку изображение просто сохраняет свой обычный размер.

Я могу заставить контейнер сжиматься overflow: hidden , но по какой-то причине ширина контейнера остается неизменной, даже когда его высота уменьшается. На самом деле это было проблемой даже для создания желаемого выходного снимка экрана, поскольку, когда я вручную устанавливал высоты на определенные значения пикселей, родительский flexbox не уменьшался (в Chrome Devtools flexbox был намного больше суммы его дочерних элементов, как если бы он содержал ширину изображения напрямую и игнорировал контейнер аватара). Мне пришлось вручную сбросить ширину фонового контейнера, чтобы заставить его уменьшиться до нужного размера.

Ответ №1:

Это всегда интересная тема «как исправить высоту». Так как ваш выбор — не устанавливать фиксированную высоту в вашем контейнере .whoami , что, очевидно, было бы самым простым способом.

Единственный способ, который я вижу, это использовать jQuery или JS для сбора высоты из `.whoami-names.

Итак, я получаю высоту каждого элемента из блока .whoami-names , а затем добавляю его в avatar контейнер с помощью jQuery.

Это «сложная» часть.

Затем в CSS для настройки отзывчивости изображения я просто добавляю, как показано ниже:

 .avatar {
  display:flex;
}
.avatar img{
  margin:auto;
  max-width:100%;
  max-height: 100%;
}

ДЕМОНСТРАЦИЯ:

 var realnameHeight = $('.realname').first().outerHeight();

var nicknameHeight = $('.nickname').first().outerHeight();

var socialLinkHeight = $('.social-links').first().outerHeight();


var totalHeightwhoamiNames  = realnameHeight   nicknameHeight   socialLinkHeight;

totalHeightwhoamiNames  = 'px';


$('.avatar').first().css('height', totalHeightwhoamiNames)  
 html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.padder-wrap {
  background: black;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.padder-content {
  background: grey;
  display: flex;
  padding: 1em;
}

.whoami {
  display: flex;
}

.whoami-names {
  display: flex;
  flex-direction: column;
}

.avatar {
  padding-left: 1em;
  display:flex;
}
.avatar img{
  margin:auto;
  max-width:100%;
  max-height: 100%;
}


/* Decorative styles */

.padder-wrap {
  font-size: 18pt;
  font-family: sans-serif;
  line-height: 1;
}

.realname {
  font-size: 200%;
}

.nickname {
  color: #333;
  align-self: flex-end;
}

.social-links {
  text-align: right;
  padding-top: .3em;
}

.social-link {
  max-width: 1em;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class='padder-wrap'>
  <div class='padder-content'>
    <div class='whoami'>
      <div class='whoami-names'>
        <div class='realname'>John Doe</div>
        <div class='nickname'>johndoe</div>
        <div class='social-links'>
          <a href='https://linkedin.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
          <a href='https://github.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
          <a href='https://twitter.com'>
            <svg class='social-link' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
              <rect fill="#ddd" width="100" height="100"/>
              <text fill="rgba(0,0,0,0.5)" font-family="sans-serif" font-size="30" dy="10.5" font-weight="bold" x="50%" y="50%" text-anchor="middle">100×100</text>
            </svg>
          </a>
        </div>
      </div>
      <div class='avatar'>
        <img src='https://via.placeholder.com/150'>
      </div>
    </div>
  </div>
</div>