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

178
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;
  }
}
READ ALSO
Выравнивание элементов top-right to bottom-left css
CSS

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

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

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

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

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

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

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

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

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

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

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

 186