Как лучше делать такие элементы? делать картинку absolute или текст absolute?
если все же картинку, так как разместить текст если он не по центру, правее?
2 ответа
В целом зависит от того, какой должен быть размером родительский блок.
Как по мне проще использовать такой вариант:
.img-text {
display: block;
width: 100%;
position: relative;
}
.img-text img {
display: block;
width: 100%;
max-height: 100%;
object-fit: cover;
}
.img-text div {
display: inline-block;
background-color: rgba(255,255,255,.75);
padding: .15em .25em;
white-space: nowrap;
position: absolute;
right: 25%;
bottom: 10%;
}
<div class="img-text">
<img src="//i.imgur.com/8G06qBx.png">
<div>Мороз и солнце</div>
</div>
Либо и картинке и тексту absolute, либо к блоку с текстом добавить background-image.
-
но если я дам тексту например left 500px при сужении экрана текст может сломатся– vvanyazz23 мая 2021 в 15:57
-
Насчёт текста можно поставить
left: 50%
иtransform: translateX(-50%)
, а картинка может поломаться, да.– Unkn23 мая 2021 в 16:00 -
Или поставить картинке
width: 100%
- тоже вариант, соответственно только текстуabsolute
.– Unkn23 мая 2021 в 16:01