Адаптация под мобильные устройства

185

25 ноября 2018, 23:00

Сижу уже 4 часа голову ломаю , не получается и все , есть 2 картинки на главной странице сайта их нужно оптимизировать под моб.устройства от минимального разрешения , скажем 200 px ширины до максимального скажем 978px

Вот мой код основной картинки , которая выводится на десктопе

.double_pick {
 background-image:url(/wp-content/uploads/main_page/men.jpg);
display:block;
width:1365px;
height:410px;
box-shadow: 0 0 30px rgba(0,0,0,0.5);
  }

Вот мой @media запрос , под эту картинку

@media screen and (max-width:960px){
.double_pick {
background-image:url(/wp-content/uploads/main_page/men.jpg);
max-width:100%;
}
  }

Я говорю браузеру чтобы он расширял мою картинку на 100% , от 1365 , а он мне выдает такое :

Половину картинку обрубает и все, мне надо чтобы полностью картинка в уменьшеном варианте отображалсь со стандартных моб.устройств(планшеты телефоны и т.д)

Оригинал картинки должен быть таким

Please help

Answer 1

задайте блоку свойства

@media screen and (max-width:960px){
  .double_pick {
   width:100%;
   max-width:1365px;
   background-size:100%; или background-size:content;
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выравнивание элементов top-right to bottom-left css

Возник вопрос как можно добиться подобного выравнивания, чтоб заполнение начиналось в правом верхнем углу, уходило вниз и если не хватает...

164

javascript

Как добавить плавность в Fullpage.js

Как добавить необходимую плавность EaseInOutExpo в слайдер Fullpagejs

221

javascript

Отложенная загрузка Div

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

175

javascript

Почему ошибка “InvalidArgumentException Trailing data” если использую toArray() для выборки из БД?

Использую Eloquent при обращении к БДМетод в модели:

190