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

Сообщений: 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	Изображение заезжает за поля новости

Новые темы	Объявления	Свободное общение
21:39 Подскажите где продвигать сайт. 10:57 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 19:12 Мошенники-копирайтеры 08:57 Индексация страниц 23:16 Есть ли альтернатива Адсенсу и РСЯ? 20:48 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 18:53 Настройка плагина для wordpress Price Shop	11:07 WebKazna. Обмены криптовалют. Доставка наличных. 09:30 Куплю аккаунт KWORK в тематике IT услуг, от 30+ положительных отзывов 04:11 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 22:56 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 18:33 Sova.gg - надежный обменник криптовалюты. 16:55 SpaceSwap.cc - Быстрый и надежный обменник криптовалют 16:45 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика	10:59 Новости искусственного интеллекта 21:44 Точные прогнозы на футбол 04:26 Хром ругается на форум 18:41 С юмором по жизни! 14:22 SENDERSEX.COM - Тизерная партнёрка онлайн игры Эротические Фанты Онлайн 20:32 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 09:37 Договорные матчи от ИИ