19 posts in this topic

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

<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;

}

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

Share this post


Link to post
Share on other sites

неа...

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

и всё...

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

Share this post


Link to post
Share on other sites

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

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

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

.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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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


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

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

Share this post


Link to post
Share on other sites
19 минут назад, Ninoi сказал:

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
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');
}

Картинки нет

Share this post


Link to post
Share on other sites
9 минут назад, speedtest сказал:

Прописал:

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

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

Картинки нет

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

Share this post


Link to post
Share on other sites
7 часов назад, k-park сказал:

неа...

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

и всё...

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

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

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

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

https://prnt.sc/f8vo66

 

Готовый код

https://jsfiddle.net/zk4m7y6x/

Share this post


Link to post
Share on other sites
2 часа назад, Canek123 сказал:

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

 

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

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

Share this post


Link to post
Share on other sites

 

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

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

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

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

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

Share this post


Link to post
Share on other sites
14 часа назад, Canek123 сказал:

 

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

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

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

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

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

Share this post


Link to post
Share on other sites
3 часа назад, k-park сказал:

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

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

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

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

Share this post


Link to post
Share on other sites
36 минут назад, Canek123 сказал:

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

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

ggg.png

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

 

Canek123 likes this

Share this post


Link to post
Share on other sites
1 час назад, k-park сказал:

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

ggg.png

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

 

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

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

k-park likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.