19 сообщений в этой теме

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

max-width

max-height

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

У меня вот такие условия прописаны:

 

    @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%;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

нет, это медиа запросы.Для начала нужно нормально обрезать картинку.

<div class="div_background">

<img id="background" alt="background" src="" />

</div>

<script>

$(document).ready(function(){

$('#background').attr('src','/images/cat/prodgoroda.jpg');

});



</script>
 

Это бред.

 

Делаете следующее.

<div class="background-div">

<img src="/images/cat/rodgoroda.jpg" alt="name">

</div>

Пишите CSS

.background-div {

max-width:500px;

max-height:500px;

position:relative;

}

.background-div img {

width:100%;

height:100%:

border:0;

}

И все. Проверяете на всех устройствах.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

неа...

img {max-width:100%;width:100%;height:auto}

и всё...

и соответственно сам div в который вложена картинка должен иметь width:100%

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Сделал вышеуказанными способами - не получилось.

Сейчас указано следующее:

.background-div {
width:100%;
}

.background-div img {
max-width:100%;width:100%;height:auto;
}

 

 

<div class="background-div">
<img src="/images/cat/fonq-min.jpg" alt="name">
</div>

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

В мозиле с отображением srcset проблемы были, включать там вроде чего то в настройках надо было специально. Подключи picturefill будет полная свобода выбора нужных изображений от размера экрана.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Ещё попробовал вот так:


.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%;
}

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
19 минут назад, Ninoi сказал:

В мозиле с отображением srcset проблемы были, включать там вроде чего то в настройках надо было специально. Подключи picturefill будет полная свобода выбора нужных изображений от размера экрана.

 

Спасибо! Что то любопытное. Но для моего уровня знаний это  сложно, может на первый взгляд...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

не нужно прописывать CSS свойства к конкретной картинке div-у.

достаточно просто прописать общее свойство для всех картинок: img {max-width:100%;width:100%;height:auto}

Это заставит отображаться картинку не выше исходного размера, но при этом сама картинка будет масштабироваться под разрешение экрана...

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
12 минуты назад, k-park сказал:

не нужно прописывать CSS свойства к конкретной картинке div-у.

достаточно просто прописать общее свойство для всех картинок: img {max-width:100%;width:100%;height:auto}

Это заставит отображаться картинку не выше исходного размера, но при этом сама картинка будет масштабироваться под разрешение экрана...

Прописал:

.img {max-width:100%;width:100%;height:auto}

.background-div {
 background-image: url('/images/cat/0001-min.jpg');
}

Картинки нет

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, speedtest сказал:

Прописал:

.img {max-width:100%;width:100%;height:auto}

.background-div {
 background-image: url('/images/cat/0001-min.jpg');
}

Картинки нет

У вас изначально в .background-div картинка не в качестве background-а была. Я вам и написал как это решить. Сейчас естественно это решение работать не будет. Для фонового изображения там будут другие свойства.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
7 часов назад, k-park сказал:

неа...

img {max-width:100%;width:100%;height:auto}

и всё...

и соответственно сам div в который вложена картинка должен иметь width:100%

Зачем говорить вставлять свои 5 копеек если не правильное решение?

Делай по моему примеру и все будет работать.

Вот проверил и все работает.

https://prnt.sc/f8vo66

 

Готовый код

https://jsfiddle.net/zk4m7y6x/

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, Canek123 сказал:

Зачем говорить вставлять свои 5 копеек если не правильное решение?

 

Наверное затем, что вы прописываете данные свойства для конкретного изображения, а в моём примере данное свойство будет применяться к любому изображению и оно будет масштабироваться в зависимости от размера блока.

Про "неправильное решение" поподробнее - где оно будет лагать и не будет работать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

 

1 час назад, k-park сказал:

Наверное затем, что вы прописываете данные свойства для конкретного изображения, а в моём примере данное свойство будет применяться к любому изображению и оно будет масштабироваться в зависимости от размера блока.

Про "неправильное решение" поподробнее - где оно будет лагать и не будет работать.

Про валидность CSS3 я смотрю наплевать.

Почитайте, может что-то новое узнаете.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
14 часа назад, Canek123 сказал:

 

Про валидность CSS3 я смотрю наплевать.

Почитайте, может что-то новое узнаете.

Спрошу ещё раз:"где и когда будет лагать данный код, будет подробный ответ?"

Или вам сказать кроме ваших умозаключений нечего по существу?

А почитать я советую как раз вам, но только не всякие там htmlbook-и, а что-то из css-tricks или Ana Tudor. Сразу обогатите свои знания.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
3 часа назад, k-park сказал:

Спрошу ещё раз:"где и когда будет лагать данный код, будет подробный ответ?"

Или вам сказать кроме ваших умозаключений нечего по существу?

А почитать я советую как раз вам, но только не всякие там htmlbook-и, а что-то из css-tricks или Ana Tudor. Сразу обогатите свои знания.

Очень смешно. Сделайте по своему и пробейте через валидатор. И сами все поймете.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
36 минут назад, Canek123 сказал:

Очень смешно. Сделайте по своему и пробейте через валидатор. И сами все поймете.

Давайте вместе посмеёмся:

ggg.png

Есть ещё предложения?

 

Canek123 понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
1 час назад, k-park сказал:

Давайте вместе посмеёмся:

ggg.png

Есть ещё предложения?

 

Пардон, видимо надо чаще мониторить изменения)

Еще раз извините.

k-park понравилось это

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу