Рассылка закрыта
При закрытии подписчики были переданы в рассылку "В Интернете деньги есть!" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Сентябрь 2011 → | ||||||
|
1
|
2
|
3
|
4
|
|||
|---|---|---|---|---|---|---|
|
5
|
6
|
8
|
9
|
10
|
11
|
|
|
12
|
13
|
14
|
15
|
16
|
17
|
18
|
|
19
|
20
|
21
|
22
|
23
|
24
|
25
|
|
26
|
27
|
28
|
29
|
30
|
||
Статистика
0 за неделю
Как использовать на сайте широкие картинки без оглядки на разрешение 1024x768
|
Как использовать на сайте широкие картинки без оглядки на разрешение 1024x768 2011-08-23 12:34 Дмитрий Сергеев Наверное многим знакома ситуация, когда проектируя макет сайта, приходится излишне ограничивать ширину изображений в основной колонке из-за пользователей с рарешением экрана 1024x768 (сейчас их доля 17%). Особенно это ощутимо в трехколоночных макетах. На dirty.ru ширина картинок ограничена 500 пикселями
Если ширина изображения больше, то обычно оно либо частично заслоняется правой колонкой, либо появляется горизонтальная прокрутка, либо боковая колонка сползает вниз. Сейчас удачным решением мне кажется загрузка изображений с шириной, удовлетворяющей разрешению 1280x1024. А для меньших разрешений пусть картинки масштабирует браузер: img {max-width: 100%; height: auto} Max-width: 100% сжимает изображения, основываясь на ширине оборачивающего блока. Но если эта ширина больше ширины изображения, то масштаб не меняется. Height: auto сохраняет пропорции изображений. Вообще это значение по умолчанию, но иногда у картинок жестко указаны размеры, и тогда пропорции искажаются. Пример есть здесь. Чтобы увидеть эффект, изменяйте ширину окна. |
Как использовать на сайте широкие картинки без оглядки на разрешение 1024x768 2011-08-23 12:34 Дмитрий Сергеев Наверное многим знакома ситуация, когда проектируя макет сайта, приходится излишне ограничивать ширину изображений в основной колонке из-за пользователей с рарешением экрана 1024x768 (сейчас их доля 17%). Особенно это ощутимо в трехколоночных макетах. На dirty.ru ширина картинок ограничена 500 пикселями
Если ширина изображения больше, то обычно оно либо частично заслоняется правой колонкой, либо появляется горизонтальная прокрутка, либо боковая колонка сползает вниз. Сейчас удачным решением мне кажется загрузка изображений с шириной, удовлетворяющей разрешению 1280x1024. А для меньших разрешений пусть картинки масштабирует браузер: img {max-width: 100%; height: auto} Max-width: 100% сжимает изображения, основываясь на ширине оборачивающего блока. Но если эта ширина больше ширины изображения, то масштаб не меняется. Height: auto сохраняет пропорции изображений. Вообще это значение по умолчанию, но иногда у картинок жестко указаны размеры, и тогда пропорции искажаются. Пример есть здесь. Чтобы увидеть эффект, изменяйте ширину окна. |
| В избранное | ||
