0

Всем привет! Подскажите пожалуйста, есть картинка на главной страничке и на ней нужно написать текст из 2 предложений. Написать, написал через position: absolute; Но адаптивностью здесь и не пахнет, не могу разобраться. Подскажите пожалуйста Надо чтобы при уменьшении разрешения, уменьшался текст и картинка

img {
  position: relative;
}
h2 {
  position: absolute;
  top: 10%;
  left: 10%;
  Color: #ffff;
  font-size: 50px;
}
<img src="https://s00.yaplakal.com/pics/pics_original/5/6/2/10439265.jpg" alt="Баннер" class="img">
<h2>Hello world!</h2>

4
  • Вы хотите чтобы текст уменьшался пропорционально изображению?
    – Max Watson
    18 янв 2022 в 15:48
  • @MaxWatson ага, а то текст становится больше, а изображение уменьшается
    – Fostich
    18 янв 2022 в 15:51
  • 1
    Я бы на вашем месте поместил изображение как background для div в котором будет текст. По уменьшению текста. Для этого используют медиа запросы и в каждом указать нужный font-size
    – Max Watson
    18 янв 2022 в 15:55
  • @MaxWatson, ага, сделал под 3 разрешения все получилось. Спс за лайфхак)
    – Fostich
    18 янв 2022 в 16:07

1 ответ 1

3

Можно сделать так..

img {
  position: relative;
}
h2 {
  position: absolute;
  top: 10%;
  left: 10%;
  Color: #ffff;
  font-size: calc(3vw + 3vh);
}
<img src="https://s00.yaplakal.com/pics/pics_original/5/6/2/10439265.jpg" alt="Баннер" class="img">
<h2>Hello world!</h2>

2
  • оО, гениально! сенк)
    – Fostich
    18 янв 2022 в 16:24
  • На здоровье! :)
    – Rudi
    18 янв 2022 в 16:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.