Интересно, есть ли какой-либо способ поместить текст внутри div над изображением, я знаю, что могу использовать z-index, но мне нужно, чтобы текст уменьшался по размеру изображения. спасибо за все, что я хочу, чтобы перезначительном текстовое поле с изображениемТекст div поверх изображения resizable
Вот один из способов, с помощью окна просмотра единиц vw
div {
position: relative;
width: 30vw;
height: 30vw;
}
div img {
display: inline-block;
width: 100%;
height: 100%;
}
div span {
position: absolute;
left: 0;
top: 0;
font-size: 6vw;
color: red;
font-weight: bold;
}<div>
<img src="http://lorempixel.com/200/200/animals" alt="">
<span>Hey there</span>
</div>спасибо за все, теперь я буду очень благодарен – adrianmanuel
Прежде всего, необходимо установить мета-тег:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
затем использовать относительные значения для изображения (%) и текст (EM).
Надеюсь, это поможет.
Вы должны сделать демонстрацию (либо нажав CTRL + M в редакторе, либо через [jsFiddle] (http://jsfiddle.net)), чтобы продемонстрировать, что ваше предлагаемое решение будет работать. – gibberish
В промежутке я могу сделать переполнение: прокрутить? – adrianmanuel
дубликата http://stackoverflow.com/questions/5758642/how-to-put-text-over-images -in-html – Mohammad
, но я хочу знать, могу ли я изменить размер текстового поля относительно изображения. – adrianmanuel
Если вы хотите изменить размер текста и img, вы можете установить текст и img в div и изменить размер div. – Mohammad