Какие есть несколько способов отобразить div и изображение рядом друг с другом и поддерживать одинаковую высоту? - PullRequest
Новая
       45

Какие есть несколько способов отобразить div и изображение рядом друг с другом и поддерживать одинаковую высоту?

0 голосов
/ 02 мая 2018 

.container {
  display: flex
}

.image {
  max-width: 100%;
  height: 100%
}

.videotext {
  padding: 50px;
  color: white;
  align-text: center;
  background-color: blue;
  width: 50%;
  max-width: 100%;
}

img {
  width: 100%;
  vertical-align: top;
  object-fit: contain;
  height: 100%
}

.image p {
  font-weight: bold;
  left: 2%;
  top: 25%;
  color: white;
  background-color: blue;
  padding: 20px;
  position: absolute;
  height: 20px;
}
<div class="container">
  <div class="image">
    <img src="http://i.imgur.com/aYlD4AC.png">
    <p> asdf </p>
  </div>
  <div class="videotext">
    <p>Lorum ipsum
    </p>
  </div>
</div>

Пожалуйста, покажите мне разные примеры или более эффективные способы отображения этих двух элементов. Есть ли способы сделать это без flex?

Кроме того, я пытаюсь подгонять изображение под объект, но, похоже, оно не работает ...

Редактировать: Я также забыл добавить, как мне сделать так, чтобы они отображались друг над другом в определенной точке останова?

Пожалуйста, посмотрите этот пример: https://codepen.io/zadro/pen/WJjRVd

...