CSS-трюк: IE, таблица и «резиновые» изображения

33 комментария

Антон Молодой подкинул мне идею для этого поста. Он столкнулся с проблемой, с которой с моей косвенной помощью сам же и справился.

Я с этим багом (да, речь пойдет об очередном баге IE) никогда не сталкивался, поэтому решил написать об этом пост, во-первых, как шпаргалку для себя на будущее, во-вторых, вдруг кто-то из читателей и посетителей блога однажды столкнется с такой же проблемой.

Рассмотрим пример. Суть заключается в следующем:

У нас имеется «резиновая» страница, которая растягивается на всю ширину окна браузера.
Имеем таблицу с шириной 100%.
В таблице имеем ряд из 5-ти изображений (в нашем примере их реальная ширина — 250 пикселей), и необходимо, чтобы при изменении ширины окна браузера эти изображения растягивались или сужались пропорционально, заполняя всю ширину таблицы. Реализуется это следующим простым способом:
HTML:
```
<table>
	<tr>
		<td><img src="1.jpg" alt="" /></td>
		<td><img src="2.jpg" alt="" /></td>
		<td><img src="3.jpg" alt="" /></td>
		<td><img src="4.jpg" alt="" /></td>
		<td><img src="5.jpg" alt="" /></td>
	</tr>
</table>
```