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

Автоматическое масштабирование картинок

12 3
lospirata
На сайте с 24.12.2010
Offline
103
lospirata
1478

Здравствуйте. Есть резиновый блок со вставленной в него картинкой. Также для img прописан стиль, чтобы картинка масштабировалась при сжатии и расширении окна браузера. 

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

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

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

It Can't Rain All the Time Блог вебмастера (https://lospirata.ru/)
Z0
На сайте с 03.09.2009
Offline
757
ziliboba0213
#1

max-width: 100%, вроде так...

lospirata
На сайте с 24.12.2010
Offline
103
lospirata
#2
ziliboba0213:
max-width: 100%, вроде так...

Не помогло. Так изображение и не растягивается, и не сжимается.

Z0
На сайте с 03.09.2009
Offline
757
ziliboba0213
#3
lospirata:
Не помогло. Так изображение и не растягивается, и не сжимается.

У вас все фотки разного размера? Если нет, то укажите так например:

width: 100%; max-width: 300px;

lospirata
На сайте с 24.12.2010
Offline
103
lospirata
#4
ziliboba0213:
У вас все фотки разного размера? Если нет, то укажите так например:
width: 100%; max-width: 300px;

К сожалению, разного.

Z0
На сайте с 03.09.2009
Offline
757
ziliboba0213
#5

Попробуйте через jquery:

$('#img_id').css({'max-width': $('#img_id').width()});

а в css:

#img_id {width: 100%;}
lospirata
На сайте с 24.12.2010
Offline
103
lospirata
#6

А реально применить это условие конкретно к тегу img, чтобы не прописывать id у сотни картинок?

Z0
На сайте с 03.09.2009
Offline
757
ziliboba0213
#7
lospirata:
А реально применить это условие конкретно к тегу img, чтобы не прописывать id у сотни картинок?

$('img').css({'max-width': $(this).width()});

не уверен в коде, но попробуйте :)

A
На сайте с 04.11.2007
Offline
89
asteroid
#8 

img {

	width: auto; height: auto;

	max-width: 100%;

}
lospirata
На сайте с 24.12.2010
Offline
103
lospirata
#9

ziliboba0213, ни один из вариантов не подошел.

asteroid, не работает.

A
На сайте с 04.11.2007
Offline
89
asteroid
#10

opera, chrome - ok 


<div style="width:100%">

	<img src="/img.jpg" />

</div>

lospirata, а блок выше width:100%?

12 3

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