Как сделать изображение блоком?

#html #css #вёрстка

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


    

Ответы

Ответ 1

.frame {
  background: url(https://i.stack.imgur.com/uDuvb.png) no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
  font-size: 3vw;
}

.frame:before {
  content: '';
  display: block;
  padding-top: 171.5%; /* соотношение ширины/высоты картинки рамки */
}

.frame-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 58% 20% 28%; 
}

  

    
Зимнее утро
    

      Мороз и солнце; день чудесный!
 Еще ты дремлешь, друг прелестный –
 Пора,
красавица, проснись;
 Открой сомкнуты негой взоры
 Навстречу северной Авроры,

Звездою севера явись!
 Вечор, ты помнишь, вьюга злилась,
 На мутном небе
      мгла носилась;
    
    

      Луна, как бледное пятно,
 Сквозь тучи мрачные желтела,
 И ты печальная
сидела –
 А нынче... погляди в окно:
    
    

      Под голубыми небесами
 Великолепными коврами,
 Блестя на солнце, снег
лежит;
 Прозрачный лес один чернеет,
    
    

      ...