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

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

Новые темы	Объявления	Свободное общение
20:31 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки 20:16 APK на паузе. Google убивает быстрый конверт 20:12 AI под надзором. Минцифры готовят клеймо для контента 22:32 Gambling Craft - гемблинг по белому 00:12 XEvil - софт для разгадывания капчи. Бесплатная демо-версия. Привязка к SEO/SMM-софту. 16:58 MAX попер в бурж: 40 стран, ведение каналов и горы дешевого трафика 15:38 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options	05:40 Купить дедики Абузоустойчивые сервера Аренда сервера Купить dedic Дедик Дешево vps vds сервера дедики на SSD! 17:48 SellBuycoin.io - надежный проводник в мир обмена криптовалют на фиат и наличные по РФ! 17:13 Анализ курсов и недежности обменников - Kurs.Expert 15:29 CactusPay.PRO \| Умная платёжная система с выводом в USDT TRC-20 14:20 Вериф аккаунты АВИТО + платежи 14:17 Swapwatch.org — Мониторинг криптовалютных обменников 08:01 HH.ru Работадателя вериф	00:10 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 23:52 Сайты Рунета 20:23 Панель Кнопки соцсетей 20:09 Чак Норрис ушел - 19 марта 2026, 86 лет, семья подтвердила 20:09 Точные прогнозы на футбол 17:40 молодильные яблоки и живая вода 14:03 Огородники