Адаптивное изображение

Сообщений: 79 Регистрация: Сен 2013

17 Мая 2017 03:38

Здравствуйте уважаемые форумчане!

Уже продолжительное время пытаюсь привести дизайн сайта в порядок, но есть одна проблема, с которой не могу справиться.
Пациент prodgoroda.ru
Есть картинка в самом верху сайта, которая отображается только на главной странице.
На изображении продукты.
Так вот, никак не могу сделать так, чтобы для различный устройств это изображение имело нормальную адаптацию, причём без перекосов при сжатии.
Понимаю например, что на устройствах с разрешением 360×640 картинка не может сжаться без перекосов. Но как сделать, чтобы боковые части отсекались при уменьшении экрана, а сам ансамбль продуктов был по центру? Если так можно реализовать, конечно.
При разрешении 320×480 видно только часть корзинки... При разрешении 980×1280 картина уезжает вниз.
Пользуюсь инструментами веб-разработчика в мозиле для визуализации сайта.
Прошу помощи специалистов.

Изменено: Здесь Валеры нет! - 17 Мая 2017 03:40

Здесь Валеры нет!

Сообщений: 79 Регистрация: Сен 2013

17 Мая 2017 09:09

У меня вот такие условия прописаны:
    @media (min-width: 768px) {
img#background{
position: absolute;
   width: 105%;
   top:-15px;
left:-15px;
   min-height: 100%;
}

   }
   @media (max-width: 768px) {
img#background{
   width: 100%;
   min-height: 100%;
}
      @media (max-width: 320px) {

img#background{
   min-width: 300%;
   min-height: 100%;
}

Сергей Бойков

Сообщений: 276 Регистрация: Дек 2016

17 Мая 2017 09:41

Нужно включить

background-position: center;
background-repeat: no-repeat;
background-size: cover;

Вот попробовал тут _https://codepen.io/Baikal/pen/LyBobW

forte144

Сообщений: 270 Регистрация: Ноя 2012

17 Мая 2017 09:54

Такая,шляпа делается очень просто. Используйте див с бекграундом.
Дальше возможны варианты. Первый - бекграунд cover. Див для различных разрешений прописываете через запрос медиа css

Второй несколько хитрее. Например вы хотите чтобы изображение не масштабировалось при уменьшении экрана. Тогда используйте широкий бекграунд, а основное изображение размером под минимальную ширину разместите в центр бекграунда. Дальше примерно так
СSS
.image {
display: block;
background-image:url(...jpg);
background-size: cover; // бекграунд вписать
background-repeat:no-repeat; // не повторять
background-position: 50% 50%; // бекграунд будет показан по центру
width: 100%; // бекграунд будет показан на всю ширину
height: ...px; // ваша постоянная высота
}
HTML
<div class="image"></div>
Вуаля)

Здесь Валеры нет!

Сообщений: 79 Регистрация: Сен 2013

17 Мая 2017 11:19

Друзья, спасибо что откликнулись!

Установил:

.background-div {
  display: block;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/images/cat/0001-min.jpg');
  width: 100%;
  height: 100%;
}

Картинку взял пошире специально.
Но результат не удовлетворяет.

forte144

Сообщений: 270 Регистрация: Ноя 2012

17 Мая 2017 11:39

играцца с имиджем процесс творческий, все в итоге получится) Вдогонку через медиа запросы можно несколько поджать высоту для мобильных и планшетов 90, 80 проц или сколько вам необходимо

Здесь Валеры нет!

Сообщений: 79 Регистрация: Сен 2013

17 Мая 2017 11:50

Цитата
forte144 пишет: играцца с имиджем процесс творческий, все в итоге получится) Вдогонку через медиа запросы можно несколько поджать высоту для мобильных и планшетов 90, 80 проц или сколько вам необходимо

Уже третий день играюсь. Никак не получается. Впору вообще отказаться от картинки...

Принципал

Сообщений: 1305 Регистрация: Июл 2012

17 Мая 2017 12:44

Цитата
Здесь Валеры нет! пишет: Уже третий день играюсь

А почему бы не назначить разные файлы изображений для разных медиазапросов.

Код

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

27.12.2023 11:01	А какое изображение валидное?
04.01.2014 00:52	Изображение заезжает за поля новости

Новые темы	Объявления	Свободное общение
11:17 Новая поисковая система от OpenAI 08:07 Самозанятые смогут зарабатывать в рекламной сети VK 07:57 А ты жарил? АПдейт Яндекс выдача 11 мая 2024 21:30 Артемий Лебедев: «ВКонтакте» станет «новым поисковиком» 17:45 Google рассматривает возможность взимания платы за поиск 17:39 Привеееет, дорогостоящая моя! Ну ты даешь, как счастлива созидать тебя тут на нашем веб-сайте! А если ты все еще не уверена, зачем он тебе необходим, то давай, я для тебя все раскажу, как лучшая подружка. 12:11 Сайты-копипасты	11:46 DualCoin - быстрый криптовалютный обменник 08:29 TETChange-Обменник криптовалют 10:09 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 18:40 Раскрутка сайта прогонами и поведенческими. Опыт с 2009 года - качественно на любой бюджет (NEW 2022 новостной прогон)! 08:15 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust 23:45 Криптовалютный обменник Xgram.io - новое воплощение качества 12:23 Готовые аккаунты Яндекс Директ с пройденной модерацией, с отлежкой, трастовые	11:40 Кто сделает прогон для адалт сайта? 09:25 Добро пожаловать в цифровой мир... 11:16 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 10:31 Видимо, похороны СУПРа уже прошли как-то по-тихому 08:08 С юмором по жизни! 08:02 Жизнь за границей, куда переехать. 07:58 Точные прогнозы на футбол