Установка div в точном размере его дочернего или фонового изображения - PullRequest
Новая
       14

Установка div в точном размере его дочернего или фонового изображения

0 голосов
/ 08 февраля 2019

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

Я уже сделал это такчто размер изображения автоматически изменяется по размеру окна без растяжения или прокрутки: 

position: absolute;
max-width: 100%;
max-height: 100%;
height: auto;

Но у тегов IMG не может быть дочерних элементов, поэтому я не могу поместить дочерний элемент абзаца, который знает, какого размера изображениеis.

Поэтому моей следующей мыслью было вставить элементы IMG и абзаца в содержащий DIV.Таким образом, DIV расширится до размера изображения, и абзац сможет позиционироваться на основе этого размера.Но размер DIV составляет всего 0x0;он не расширяется автоматически, чтобы содержать изображение.Есть ли способ сделать родительский DIV точным размером его дочернего IMG?

В качестве альтернативы, я мог бы использовать свойство background-image DIV для содержания изображения, а не тег IMG.Но будет ли тогда у дочернего элемента абзаца доступ к размеру фонового изображения его родительского DIV?

1 Ответ

0 голосов
/ 08 февраля 2019

Я не уверен на 100%, что понимаю вопрос, пример кода был бы полезен… Но если вы имеете в виду, что какой-то текст поверх изображения расположен относительно размера изображения, один из вариантов -поместите текст абсолютно и просто переведите его в процентное значение, соответствующее искомому смещению: 

.container {
   position: relative;
   display: inline-block;
   overflow: hidden;
   img {
      display: block;
   }
}

.copy {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   color: red;
   transform: translate(10%, 20%);
}

<div class="container">
   <img src="https://source.unsplash.com/random/900x400" alt="">
   <div class="copy">
      Some text
   </div>
</div>

рабочий пример: https://codepen.io/md/pen/daJdjj

...