Как масштабировать изображение для мобильной версии

голоса: 0

Как уменьшить изображение для мообильной версии? Изображение в верхней части сайта не уменьшается при просмотре с мобильного, причем в альбомном/горизонтальном положении с телефона отображается корректно, а в книжном/вертикальном просмотре остается неизменной. Шаблон 1711 .

Адрес сайта https://my-doctor.my1.ru

Мобильная версия

Версия с монитора

Буду очень признательна за быстрый ответ! Заранее благодарю!

 

 

 

 

 

 

 

Адрес сайта https://my-doctor.my1.ru
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0

Проблема в том, что фото задается как фон для блока. Адаптивный фон идеально не настроить чтобы и по ширине и по высоте отображалось 100% как в полной так и мобильной версиях. Как у вас сейчас отображается, это лучшее решение, если же в стилях строка номер 67 поправить стили:

.promo-i{height:450px;line-height:450px;background:url(https://my-doctor.my1.ru/1300kh400.jpg) 0 0 no-repeat;background-size: cover;}

красное заменить на 100% тогда будет более меньшее четко отображаться, но фото по высоте не будет отображаться полностью.

Или же в стили прописать новой строкой:

@media only screen and (max-width:768px){.promo-i{background: url(/1300kh400.jpg) 100% 0% no-repeat!important;}

| Автор:
Ок спасибо! попробую
...