Подгонка изображения высотой 100% в гибком формате

#html #image #css #flexbox

#HTML #изображение #css #flexbox

Вопрос:

У меня есть адаптивное фоновое изображение в div. И я хочу, чтобы поверх него был гибкий макет с двумя столбцами, в котором в левом макете было изображение высотой 100% от родительского div с автоматическим масштабированием ширины, как у адаптивного изображения. а правая часть представляет собой двухстрочный текст, расположенный по центру во flex.

Это самое близкое, что я могу получить на данный момент. Но flex не растягивается, чтобы соответствовать фоновому изображению div, а левое изображение не масштабируется соответствующим образом при изменении размера браузера.

Примечание: Ни ширина, ни высота в пикселях не должны быть указаны в коде

 .parent {
  display: flex;
  align-items: center;
}

.left {
  height: 100%;
}

.right {
  flex: 1;
  background: blue;
}

   <div style="position: relative;">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
      <div class="parent">
        <div class="left">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
        </div>
        <div class="right">
          <p>
            123
          </p>
          <p>
            456
          </p>
        </div>
      </div>
    </div>
</div>

Ожидание:

1. Что-то вроде этого? jsfiddle.net/tgrs0uo4/1

2. @Michael_B совсем рядом, но, к сожалению, нет. Я создал [jsfiddle] ( jsfiddle.net/tgrs0uo4/4 ) с квадратным изображением в левой колонке для иллюстрации. как вы можете видеть, квадратное изображение не поддерживает соотношение сторон изображения (1: 1) внутри flex box

3. Попробуйте это: jsfiddle.net/tgrs0uo4/5

4. @Michael_B намного ближе, но все равно чего-то не хватает. Изображение не занимает высоту div фонового изображения. В идеале высота изображения должна совпадать с высотой div фонового изображения при сохранении собственного соотношения изображения

5. Просто удалите align-items: center из .left контейнера: jsfiddle.net/tgrs0uo4/6

Ответ №1:

Удалить align-items: center; из parent div.

Если вы хотите выровнять текстовые элементы по центру, используйте padding или position: relative/position: absolute

Затем применить height: 100%; к изображению.

1. Я обновил код в этой скрипке . Я не вижу, чтобы левое изображение масштабировалось в соответствии с соотношением при изменении размера браузера. И чтобы высота flex (или левого изображения) не занимала 100% высоты фонового изображения.