Перейти к содержимому

Форум ZiSMO.biz


Купить ссылку здесь
Фотография

Помощь с картинко на сайте

Форум ZiSMO.biz
5
Сообщений в теме: 5

OFFLINE Отправлено

GreatestMaks
Активный
  • Онлайн:44д 11ч 34м
15

Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так:
 

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

При больших размерах экрана (ПК) все выглядит хорошо. 

При низких разрешениях экрана (мобильный телефон, 320 на 240 px) картинку увеличивает БОЛЬШЕ своего собственного размера. Например, если картинка 100 px по ширине, ее растянет на 320 px по ширине, искажая качество.

Надо сделать так, чтобы картинка не увеличивалась больше своего собственного физического размера.Как можно исправить?


    • 0
  • Наверх

OFFLINE Отправлено

Коля Петрик
Пользователи
  • Онлайн:9ч 28м
1
Используй media query css
 
Пример:
 
@media (max-width: макс.размер) {
 
//CSS  
 
}

    • 0
  • Наверх

OFFLINE Отправлено

Arsaman
Постоянный
  • Онлайн:31д 2ч 53м
27

Скинь сайт - посмотрим.


    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

soc-proof.su
Premium plus
  • Онлайн:27д 7ч 32м
41

*
Популярное сообщение!

a1226a339ab5.jpg

Soc-proof.su – то, что вам подойдёт. Автоматический сервис продвижения и нaкрутки в VК / Insta YT TGram FB / TW OK - 24/7. Никаких шаблонных «панелей»! Только собственные базы для нaкрутки. 

Акции и скидки: Подписчики Instagram 150k в сутки - 0.09 руб. / Быстрые Живые RU на канал YT - 1.5 руб.  / Вступившие ВК с гарантией 0.22 руб. / Живые с приложений - эксклюзивно только на нашем сервисе.

  • Широчайший спектр услуг для любой соц. сети по низким ценам (более 500 услуг) + уникальные услуги для наших клиентов. Возможность получить скидку 15% сразу;
  • Привлекаем качественную аудиторию, с гарантией и без блокировок. Живые с приложений от 0.7 руб / Быстрые подп. YouTube с гарантией от 0.9 ;
  • ​Работаем с 2012 года и имеем сотни положительных отзывов (в т.ч. на ZiSMO). Мы не используем API, соответственно, не перепродаём чьи-либо услуги;
  • Оптовые пакеты по суперсниженным ценам, скидки до 40% и бонусы при пополнении каждому клиенту. Подписчики с гарантией ВК - 0.16 ₽;
  • Возможность отмены заказа и быстрая поддержка. Аттестат Продавца Webmoney BL 550 △

Сообщение отредактировал soc-proof.su: 22 01 2020 - 22:45

Изображение
    • 19
  • Наверх

OFFLINE Отправлено

siteMaster
Активный
  • Онлайн:5ч 25м
1

Попробуй не max-width:100%, a просто width:100%


Сообщение отредактировал siteMaster: 26 07 2019 - 09:13

    • 0
  • Наверх

OFFLINE Отправлено

Ign.
Активный
  • Онлайн:1д 23ч 32м
4

Конкретики немного, поэтому я так понял из комментариев, если проблема не решена, то для широкоформатных адаптивных изображений пробуйте так ( скопировано):
.container {

width: 100%;
}
img {
width: 100%;
}


Сообщение отредактировал Ign.: 02 08 2019 - 15:54

    • 0
  • Наверх

OFFLINE Отправлено

Kandi
Активный
  • Онлайн:8д 1ч 49м
9

Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так:
 

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

При больших размерах экрана (ПК) все выглядит хорошо. 

При низких разрешениях экрана (мобильный телефон, 320 на 240 px) картинку увеличивает БОЛЬШЕ своего собственного размера. Например, если картинка 100 px по ширине, ее растянет на 320 px по ширине, искажая качество.

Надо сделать так, чтобы картинка не увеличивалась больше своего собственного физического размера.Как можно исправить?

 

Всё зависит от контейнера в котором находится картинка, но добавьте width: 100% или windth: inherit, должно помочь. Если не поможет, киньте ссылку на сайт и прикрепите скриншот с примером ошибки.

Если тяжелый случай и кривой CSS, возможно надо использовать медиазапросы.


    • 0
  • Наверх