Автор: Крис Койер
Перевод: Всеволод Козлов
Нередко возникает такая ситуация, когда необходимо в условиях ограниченного пространства разместить мини-версию большого изображения. Конечно, можно воспользоваться специальными скриптами или сделать мини-версию изображения и сохранить ее отдельным файлом, а можно сделать гораздо проще — с помощью CSS!
Фрагмент HTML-кода
<img src="images/fruit.jpg" alt="fruit" class="expand" />
Фрагмент CSS кода
img.expand { width: 10em; }
Оригинал статьи: Resizeable Images (At Full Resolution!)
Смотрите также:
- Скрипт галереи
- Jquery скрипты
- Prestashop шаблоны
- Создание логотипа
- Текстуры
- Css button
- Иконка корзины
- Css конструктор
- Blockquote css
- Сделать сайт
12 комментария(-ев)
Нда… лучшебы уж и не переводили
Перевели только часть, ни ссылок на примеры, ни замечаний по применению данной возможности.
Если уж берётесь за дело, то подходите к нему ответственно, а не бросая посетителям пыль в глаза.
Смотря на эту страницу, только 2 предложения по теме, а вокруг одна реклама и рекламу. Противно аж.
Да и Вы сами свой сайт бы «причесали». Видели его в разных браузерах? А то так и не вылезете за 1-2% популярности.
gam, если бы Вы посмотрели оригинал, то увидели бы, что количество материала идентичное…
И что не так с его отображением в других браузерах? Firefox, Opera, IE7 — везде идентично, что не так-то?
На мой взгляд, у Вас не перевод, и просто изложение материала своими словами. Тогда да, можно и парой фраз обойтись, но только суть не терять.
Да и ссылку тогда на пример, чтобы посмотреть, а не тратить время на реализацию этого варианта своими силами и потом ломать голову — ну сделал и что, а как оно работает то? А вот как работает рассказано как раз в примере, ссылку на который Вы так и не дали. При таком «переводе» у Вас потерялась идея, которую автор хотел показать.
И к чему тогда делать ссылку «читать полностью», если там читать уже нечего, (если только не накрутка показов банерных)?
gam, тема с банерами — платят не за показы… Поэтому никакой накрутки нет!
А про ссылочку на пример — спасибо, что указали на недостаточек!
И все-таки можете обосновать «Да и Вы сами свой сайт бы “причесали”. Видели его в разных браузерах? А то так и не вылезете за 1-2% популярности.» А то интересно, что там где не так, как должно быть!
Всеволод, gam здесь частично прав — если вы посмотрите на сайт в IE6, то будет смотреться несколько иначе — блок #wrapper будет уже, а #footer (за счет этого) будет смотреться шире… У «Рекламы от Гугл» левый отступ будет меньше, а верхний — больше и т.п.
По теме: к img.expand я бы еще добавил max-width: 120% (чтобы при увеличении картинка не потеряла качество). А в идеале ее вообще лучше поместить в отдельный div и отцентрировать вертикально/горизонтально, чтобы и картинка не теряла качества, и пропорции сохранялись.
Добавлю ещё такие вещи:
Картика «rss» — она у Вас расползается чтоли или это спецом сделано, что под ней (где отражение заканчивается) есть ещё какой-то её кусок. При этом фон картинки белый, а она стоит на сером фони — смотрится как на сайтах годов эдак 90-х. Да, и уменьшите её, если это, конечно, есть желание, потому как сейчас она смотрится громоздко и «пугающе». Колличество кликов на неё не такое огромное, чтобы боятся за то, что пользователь, которому понравится ресурс, не найдёт эту кнопку.
В браузерах сайт как-бы «прыгает». В опере и ff верхняя часть (синяя) прижимается к верху, а в ie(6, 7) там сверху отступ черной полосой.
Блок с меню в опере и ff в ширину основного, а в ie(6, 7) шире основного.
В ie7 подвал выезжает из общей ширины и становится на 5-10 px шире основного блока.
Основное меню почти не видно — серые буквы на черном фоне. Нет в меню пункта «Главная страница». Да, можно, конечно кликать на текст на синем блоке, но он больше похож на рекламу, чем на логотип (символ) ресурса.
Ещё, на мой взгляд, здесь нужно поработать со шрифтами. Сейчас, смотря на сайт — это каша из блоков текста разной величины шрифта. Смотрится ужасно. Не удобно отделять основной материал от второстепенного.
У Вас, я так понимаю, для картинок основного блока задан какой-то padding и border. Так в opere и ff он есть, а в ie(6, 7) padding пропадает и, например, блок смайлов для вставки в комменты то умещается в 1 строку, то перелитает на 2.
Да, с праздником Вас!!!
И красивого вам кода и подписчиков!
[...]
А по-поводу самого способа уменьшения картинки.Это всё туфта! Картинка будет загружена браузером в изначальном обьеме (даже если она будет 1280*1024 и весит 800 кило…)
width: 10em; — лишь изменяет представление рисунка в окне браузера, но никак не уменьшает его вес (размер).Чтобы убедится, достаточно скопировать адрес «типа уменьшенного рисунка» в адресную строку и увидете исходный большой рисунок, и в его свойствах родной размер.
Описанный метод актуален в том случае, когда на сайте этот рисунок присутсвтует в исходном большом размере, и пользователь собирается посетить страницу с ним. А иначе, — только лишняя нагрузка трафика!!!
Автору сайта — блин, от этих вордпресов уже тошнит, все как один.Неужто слабо сделать нормальный сайт без всяких движков, тем более какой-то блог..?
Добавлю вам немножко полезности:
a:link img.expand { width: 5em; }
a:hover img.expand { width: 10em; }
Если jpg сохранять в 100dpi, без сжатия или со сжатием около 93% это дело работает вполне неплохо
Поиграйте с настройками, можно перед сохранением немного заблюрить по гаусу.
Для gif-а используйте дизеринг, но аккуратно.
Мда загрузили =))))
Еще немного дегтя.
Посмотрите на Ваш блог в Opere 9.62.
Левая колонка упала вниз под центральную часть.
А центральная часть выровнялась по левой стороне.
Соответственно с правой стороны теперь пустота.
Жуть короче.
Это как сайт посвященный раскрутке на котором 3 посещения в сутки.
блин, понаделают кучу браузеров, потом верстай под каждый!
уверен что у критикующих товарищей проблемы с ихними сайтами еще хуже…
что касается темы, товарищ Киборг прав — всеравно будет грузится вся картинка целиком, что не есть гуд! так что ИМХНО самый лучший вариант сделать превью и загружать…