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

Сообщений: 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:51 Stixi.ru. и stixi.com 16:22 Работает ли ссылочное продвижение 2019 – 2020? 14:13 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы \| Еженедельные Выплаты \| CPA до $950 10:09 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 21:07 Взрывной рост роботности в Метрике 18:33 Trafee.com – эффективная монетизация вашего дейтинг трафика 15:41 Adtrafico - Правильная партнёрская сеть под бурж трафик	20:22 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 20:21 Sectormoney.com - быстрый и удобный обменник 17:27 Уникальный сервис SEO продвижения 05:08 [WORDPRESS] [Gemini\|GPT]️ ClipAI - Копирайтинг больше не нужен! Подключит ИИ к интернету и напишет статьи с автоматической публикацией на сайт. 14:51 Мощные прокси для вашего бизнеса! 12:17 Продам дешёвые домены (1$/штука) 10:58 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик]	19:45 Точные прогнозы на футбол 20:09 Сколько сейчас стоит наполнение ИМ? 12:43 Куплю проигрышные букмекерские аккаунты 04:33 Половина скидок на распродажах — фейк 07:53 НейроБабушка наказывает мошенников 19:59 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 19:57 Пятница 13-ое: VK принял радикальное решение и закрыл доступ к порно контенту