Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Динамичный размер картинки

Автор: emptyby 20.2.2010, 05:23

Доброй ночи, винградовцы!

Есть такая задача:
Картинка в зав-ти от разрешения браузера должна сужаться или наоборот расширяться. Т.е. если разрешение 1024x768, то ее область видимости должна уменьшиться, если разрешение 1280х800, то соответственно должна показаться больше или на максимум.

Решение:
Сделать динамичный див, у которого фоном будет именна эта картинка. Он уменьшается при маленьком разрешении, и ограничивает видимость картинки с background-position: center;

Т.е. например с таблицей:

Код


<table>
  <tr>
    <td style="width: 20%;">
       <div style="background: url(/path/to/img.png) center; width: 100%;"></div>
    </td>
    <td style="width: 80%;">
     рыба
    </td>
  </tr>
</table>

Вопрос:
Решение вроде бы как подходит.
Может есть какое-нибудь другое, более идеальное?
Как вообще это делать правильно?

Буду рад любым советам.
Спасибо!

Пример:

user posted image

Автор: Mavrun 20.2.2010, 10:37

эммм, вообще-то у вас решение и написано

Код


background: url(/path/to/img.png) center;

хотя надо чуток поправить

Код


background: url(/path/to/img.png) top center no-repeat;

привязываешь это к боди и всего делов - бэкграунд по центру и ведёт себя как надо

Автор: emptyby 20.2.2010, 14:29

Ну это понятно smile

Я же сразу написал, что использовал такое решение. Спасибо.

Неужели нет ничего другого?..

Добавлено через 12 минут и 29 секунд
И причем здесь боди? У меня может быть таких 20 картинок на странице.

Автор: MaXL 22.2.2010, 16:32

emptyby, а как ваш div будет растягиваться по высоте ?
Ну и если вот такой вот пример взять:

Код


<img src="pixel.gif" width="100%" height="10" alt="" style="background: url(IMAGE_PATH) top center no-repeat;" />

где pixel.gif -- прозрачная в один пиксель картинка
ну и width и height прописать как вам нужно. А также всё уже взять в див, которому прописать то что нужно.
Если я всё правильно здесь сделал, то плюсы следующее:
1. Всё таки это картинка, а не слой, поэтому мы здесь и имеем картинку, т.е. семантически вернее.
2. Можно прописать alt.