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

Чтобы сделать "резиновые" изображения внутри ячеек таблицы, то есть изображения, которые тянутся (пропорционально меняется их ширина и высота) в зависимости от размеров окна браузера (разрешения экрана) достаточно опустить указание размеров самого изображения, выставив в им 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, всё станет на свои места.

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

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

  • navara

    Волшебная штука, но не работает в Опере. Не подскажете, как пофиксить?

    • Версия Оперы у вас какая?

      • navara

        9.63

        • Потестил в данной версии — все работает. Какая ОС и Doctype?

          • navara

            Виста,

          • navara

            DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

            • Тогда код в студию — будем тестировать в группе разработчиков, раз такие дела.

          • navara

            У меня, оказывается, не совсем аналогичный случай — если взять пять ячеек только с картинками, все работает. Мне же надо сделать ячейки разного назначения.

            К примеру, у меня пять ячеек по 20% шириной. В первой расположена картинка, которую надо сделать резиновой, а в остальных — текст. Либо, скажем, в третьей или четвертой ячейке тоже должна быть резиновая картинка.

            Возможно этого добиться с помощью CSS и таблиц?

            • Пример можете привести?

  • b099ard

    А у меня несколько таблиц, как сделать чтобы правила работали только для одной?

    • Применять код не для всех таблиц, а для одной, задав class=»» или id=»»