VPF::растянуть картинку на весь блок

4epT

Дата 22.6.2011, 22:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 784
Регистрация: 13.8.2007

Репутация: нет
Всего: 3

Добрый вечер!

Имеет таблица:

Код


<table class="main" border="0">
    <tr class="mainRow">
        <td class="mainColumn"><div class="block"><img src="images/1.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/2.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/3.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/4.png" /></div></td>
    </tr>
    <tr class="mainRow">
        <td class="mainColumn"><div class="block"><img src="images/5.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/6.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/7.png" /></div></td>
        <td class="mainColumn"><div class="block"><img src="images/8.png" /></div></td>
    </tr>
</table>

стили очень просты:

Код


html, body { background: none repeat scroll 0% 0% rgb(255, 237, 197); padding: 0px; }
table.main{ padding: 0px; width: 100%; height: 100%; }
tr.mainRow  { padding: 0px; width: 100%; height: 33%; }
td.mainColumn  { padding: 3px; width: 25%; }
div.block { width: 100%; height: 100%; text-align: center; }

в каждый div вставляется картинка, как сделать так, что бы картинка была всегда растянута на весь див ? Например даже если 30 дюймовый экран, то эти 8 блоков должны занимать весь экран (пусть даже у картинок искажается качество) или если же 17 дюймовый экран, то что бы они сжимались.

Если для картинок указать width и height 100%, то они принимают свой родной размер )

Подскажите как это правильно сделать)

Может быть это вообще можно сверстать при помощи div ?

mcTep

Дата 27.6.2011, 12:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6

Код


div.block {
    position:relative;
}

div.block img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Это сообщение отредактировал(а) mcTep - 27.6.2011, 12:02

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »