Форум Сайтостроение Веб-строительство

адаптация картинки под размер экрана css

A1
На сайте с 12.02.2013
Offline
58
acril1994
24470

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

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

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

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

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

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#1

max-width: 100%

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
A1
На сайте с 12.02.2013
Offline
58
acril1994
#2

Не помогает. И, как я понимаю, не должно. Но если задавать max-width: 100px уменьшает картинку до 100px, но это не вариант решения. Картинка может больше быть 100px, или меньше...

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#3

Я надеюсь вы убрали width. 

.erb-image-wrapper img{

    max-width:100% !important;

    height:auto;

    display:block;

}
P
На сайте с 05.03.2009
Offline
45
potenza
#4
acril1994:
Есть адаптация картинки под размер экрана на сайте. Реализована она на данный момент так:

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

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

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

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

Используй медиазапрос в файле стилей

@media all and (min-device-width: 320px) {

img {width: 100px;}

}

Делаю сайты любой сложности с 2004 года. Качественно, ответственно, честно.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий