Наверное многим знакома ситуация, когда проектируя макет сайта, приходится излишне ограничивать ширину изображений в основной колонке из-за пользователей с рарешением экрана 1024x768 (сейчас их доля 17%). Особенно это ощутимо в трехколоночных макетах.
На dirty.ru ширина картинок ограничена 500 пикселями
Если ширина изображения больше, то обычно оно либо частично заслоняется правой колонкой, либо появляется горизонтальная прокрутка, либо боковая колонка сползает вниз.
Сейчас удачным решением мне кажется загрузка изображений с шириной, удовлетворяющей разрешению 1280x1024. А для меньших разрешений пусть картинки масштабирует браузер:
img {max-width: 100%; height: auto}
Max-width: 100% сжимает изображения, основываясь на ширине оборачивающего блока. Но если эта ширина больше ширины изображения, то масштаб не меняется. Height: auto сохраняет пропорции изображений. Вообще это значение по умолчанию, но иногда у картинок жестко указаны размеры, и тогда пропорции искажаются.
Пример есть здесь. Чтобы увидеть эффект, изменяйте ширину окна.
Дмитрий Сергеев, 26 лет, разрабатываю сайты на Drupal, управляю интернет-проектами
Комментарии
Robotti, 24.08.2011 00:19
Если мне память не изменяет, IE6 и, возможно, IE7 не поддерживают свойство
max-width.Думаю, что для для оборачивающего блока имеет смысл прописывать также
overflow-x:hidden, чтобы изображение "обрезалось".Дмитрий Сергеев, 24.08.2011 11:24
ie7 вроде бы поддерживает max-width http://www.quirksmode.org/css/contents.html
Для ie6, которого кстати осталось 2%, наверное самый простой способ - _width: 99%
overflow-x:hidden полезно еще и потому, что пользователи периодически постят длинные строки символов без пробелов.
Robotti, 24.08.2011 18:41
Дмитрий, ведь
width: 99%это не тоже самое что иmax-width: 100%. В первом случае маленькая картинка растянется, а во втором - нет.Дмитрий Сергеев, 24.08.2011 20:25
Это я упустил. В моем случае картинки были максимальной ширины, да еще max-width на весь макет стоял.
Попробовал сейчас _width: expression(this.width > 500 ? '
'500px' : 'auto'); , где 500 - ширина картинки, при которой макет не разваливается на 1024, ie6 стабильно виснет.
Получается, пользователям ie6 с 1024 придется смотреть картинки, обрезанные overflow-x: hidden.
Сергей, 24.08.2011 09:43
Да, удобно. Но работает ли эта фигня в IE?
Дмитрий Сергеев, 24.08.2011 11:07
Начиная с ie7 должно работать. Для 6 можно expression написать или отдельно задавать width.
Razunter, 24.08.2011 21:58
Жаль, нет модуля, который автоматически преобразовывал бы картинки выше определённого размера в тексте ноды до нужного размера, добавляя ссылку на оригинал.
Дмитрий Сергеев, 24.08.2011 23:10
В друпале?
Razunter, 25.08.2011 18:14
Ну да. Есть image_resize_filter, но автоматом нужный размер он не задаёт.
Дмитрий Сергеев, 25.08.2011 21:23
Сделать, чтобы по превью из текста была ссылка на оригинал кажется можно с помощью модуля insert и небольшого патча (для 6-ой версии). Если insert работает с imagefield, то можно даже выбрать пресет imagecache для превью.
Вообще существование imagecache упрощает задачу. То есть каким бы образом ни вставлялся тег картинки в textarea, всегда можно слегка подправить используемый модуль, чтобы он дополнительно генерировал обертку из тега ссылки и заменял оригинал картинки на нужный пресет.
>> Есть image_resize_filter, но автоматом нужный размер он не задаёт
Не очень понял. В нем размер по умолчанию не настраивается разве?
Дмитрий Сергеев, 05.10.2011 23:34
Попалась статья http://unstoppablerobotninja.com/entry/fluid-images , там много подробностей про масштабирование картинок на клиенте.
GerinG, 06.10.2011 12:18
Я так понимаю, это фича для резиновых шаблонов и лайтбоксов. Потому как при вставке картинки в колонку фиксированной ширины - не вижу смысла вставлять картинку с шириной большей, чем сама колонка.
Дмитрий Сергеев, 11.10.2011 15:59
Да.
NMitra, 07.10.2011 19:51
Можно использовать
background-size: cover;
картинка будет растягиваться на всю ширину занимаемого поля.
background-size: contain;
То же самое, только будут сохранены соотношения ширины и высоты.
http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html - здесь можно посмотреть, что я имею ввиду.
Дмитрий Сергеев, 11.10.2011 16:05
Спасибо, не знал о background-size, полезное свойство. И поддерживается почти всеми браузерами. Из массовых только ie7-8 не умеют.
NMitra, 11.10.2011 16:16
Рада помочь