Подскажите пожалуйста, на сайте есть блок, в нем картинка с текстом, как сделать картинку адаптивной? через cover обрезает края.

<div class="page--title pd--130-0 bg--img bg--overlay" data-rjs="2" data-rjs-processed="true" style="background-image: url(assets/images/26/13.jpg&quot;);">
              <div class="container">
                    <h1 style="color:#fff;text-transform:uppercase" class="h1">Контакты</h1>
              </div>
           </div>

Не очень хочу переписывать html код, т.к. менять прийдеться на всех страницах. А их много, как через css решить?

Размер элемента не может зависеть от размера картинки в background

смахивает на гавно собранное на конструкторе

https://cadex.kz/kontakty.html - там где контакты фото. Как проще всего сделать?

Да это конструктор, переписать с нуля блок быстро, но тут 100 страниц и на каждой менть...

а вот нефиг многостраничники на конструкторе собирать =)

Никак. Либо background-size: contain; и поля, либо cover и обрезка, либо задать пропорции картинки элементу page--title

Ну так не я же собрал))

ну вот теперь вешай класс отдельный на этот элемент и сиди адаптируй по размерам

у тебя там картинка 1:4, сделать типа width 100vw, height 25vw

но подогнать пропорции

спасибо, действительно рабочий метод.

(но будет выглядеть как говно, я бы туда вообще картинку не лепил, или ограничился cover)

Оно уже заведомо как говно, хуже не будет)

можешь по селектору найти этот эл и адаптировать, раз страниц много с ним то нет смысла на каждой класс дописывать

background-size: cover;
   width: 100vw;
   height: 22vw;

а потом открываешь на широком мониторе

уляля