Резиновые изображения в таблице

Чтобы сделать "резиновые" изображения внутри ячеек таблицы, то есть изображения, которые тянутся (пропорционально меняется их ширина и высота) в зависимости от размеров окна браузера (разрешения экрана) достаточно опустить указание размеров самого изображения, выставив в им CSS ширину, равную 100 процентов.

Всё было бы хорошо, если бы не Internet Explorer со своими багами. Смотрим пример.

UPD: В Google Chrome 2, 3 тоже есть баги.

Для примера возьмём такую разметку.

HTML:

<table>
    <tr>
        <td><img src="1.jpg" alt="" /></td>
        <td><img src="2.jpg" alt="" /></td>
        ...
        <td><img src="n.jpg" alt="" /></td>
    </tr>
</table>

CSS:

table {
    width: 100%;
    border-collapse: collapse;
}
table td {
    padding: 0 10px;
}
table img {
    width: 100%;
}

Во всех браузерах, изменяя размеры окна, можно наблюдать пропорциональное сжатие изображений, но всеми любимый Internet Explorer считает по-другому. Он сжимает картинки до того момента, пока они не достигнут своих истинных размеров. Если исходный размер картинок будет 300px, то сжать их меньше этого размера он не позволит.

Для решения данной проблему необходима всего одна строчка в CSS:

CSS:

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

Если теперь посмотреть данный пример в Internet Explorer, всё станет на свои места.

Источник: Свобода слова вебмастерского

Похожие публикации:

1. Диагностический CSS
   При вёрстке очень важно следовать стандартам, чтобы ваши макеты в будущем выглядели сносно, поэтому необходимо избавлятся от старых и ненужных...
2. Это скорее фича, чем бага
   Столкнулся с непонятной мне ошибкой или, наоборот, фишкой в браузере FireFox. По каким-то странным причинам этот браузер стал мне рисовать...
3. Баг стилизации noscript-тега в Internet Explorer 8
   Содержимое тега <noscript> отображается, когда в настройках браузера выключена поддержка javascript. Сейчас по умолчанию данная поддержка включена во всех браузерах....
4. Таблица соответствия размеров шрифтов в CSS
   Не важно каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимость посмотреть, какое значение соответствует текущему...
5. Диагностический CSS
   Eric Meyer предложил использовать CSS-правила для выявления ошибок на странице при верстке страницы. Код показывает ошибки на странице, если у...

Теги: CSS, HTML, Internet Explorer

Поделиться: