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

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

Новые темы	Объявления	Свободное общение
19:33 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 09:02 Как продвигать сайт с неуникальным контентом 08:58 Стоит ли добавлять сайт в Rambler топ 100? 08:57 Absence в Армении 14:50 Индексация страниц 12:36 У кого новостник, дайте пару советов плиз 13:53 AviTool - мощный инструмент для автоматизации работы с Avito	15:52 AllCharge.online. Современный, быстрый и надёжный обменник 15:32 CactusPay.PRO \| Умная платёжная система с выводом в USDT TRC-20 12:01 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру) 05:17 Продам копию сайта. 04:11 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 01:31 Скрипт обменника валют 21:44 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств	21:05 Точные прогнозы на футбол 11:07 Ну что, кто куда деваете свои сайты? 22:09 Добро пожаловать в цифровой мир... 19:42 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор 22:08 Накрутка поисковых подсказок 14:01 Union Pharm - топовая фарма-партнерка для профессионалов! 10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди