Сижу уже 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