0

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

2
  • 2
    Нет, вы изменяете размер блока, а не картинки. А размер картинки в вашем случае меняется через background-size
    – andreymal
    28 авг 2018 в 9:10
  • @andreymal размер редактиуруется , только теперь почему то width начинает выпирать я указываю фиксированную шиирну background-size:50%;
    – Alex
    28 авг 2018 в 9:49

1 ответ 1

1

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

@media screen and (max-width:960px){
  .double_pick {
   width:100%;
   max-width:1365px;
   background-size:100%; или background-size:content;
  }
}
13
  • @Max_Manchak не работает, не фиксирует высоту и по ширине 1/3 от экрана
    – Alex
    28 авг 2018 в 14:48
  • а есть какая нибудь ссылка посмотреть пример, может там совсем и не в картинке проблема? 28 авг 2018 в 16:27
  • 1
    используйте следующий код представленный в примере jsfiddle.net/q4rma267 28 авг 2018 в 16:37
  • 1
    это селектор который отвечает конкретно за стилизацию этих ссылок... единственный момент посмотри на других страницах или не поехала верстка..., на твоем месте я бы дал этим 2-м ссылкам какой нибудь 1 класс и стилизовал по нему чтобы не пересекаться с другими элементами страницы 28 авг 2018 в 16:46
  • 1
    например так jsfiddle.net/q4rma267/2 28 авг 2018 в 16:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.