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>

CSS:

table {
	width: 100%; /* растягиваем таблицу на всю ширину контента */
	border-collapse: collapse; /* схлопываем границы ячеек */
}
table td {
	padding: 0 10px; /* для красоты добавляем отступы в ячейках */
}
table img {
	width: 100%; /* растягиваем изображение на всю ширину ячейки */
}

Посмотрите на живой пример вышеописанного.

Все замечательно, за исключением одного «но» — если смотреть этот пример в браузере IE6 или IE7, вы заметите, что при сужении окна браузера ширина изображений в определенный момент «застревает» и не они не сужаются дальше, в результате чего таблица вылазит за пределы контента.

Это не что иное, как очередной баг всеми «любимого» браузера — изображения не сужаются дальше их фактического размера. В нашем случае это 250 пикселей.

Ну а трюк, который позволяет исправить это недоразумение, заключается всего в одной строчке CSS-кода, который нужно применить к таблице, в которой расположены наши изображения:

table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed; /* вот оно, лекарство от недуга IE6 и IE7 */
}

Теперь посмотрите на тот же самый пример, но с использованием этого CSS-трюка.

Комментарии (33)

Артём Курапов
18 декабря 2009 г. в 15:14
В хроме две картинки справа при сужении блокируются. Думается мне тут лучше min-height/min-width использовать
Dimox
18 декабря 2009 г. в 15:23
Я в хроме никаких проблем не наблюдаю. Версия 3.0.195.33.
Steward
18 декабря 2009 г. в 16:43
Гм… тоже если честно никогда не сталкивался потому что всегда указываю размеры изображений…
да и вообще я не сторонник резиновой верстки :)
Мне даже, если если честно, очень сложно представить где это может пригодиться — это, всё равно если бы менялся размер шрифта в зависимости от размера окна браузера — мягко говоря, это очень странно и не совсем правильно.
1. Alexey.og
  18 декабря 2009 г. в 17:21 / ответ на коммент Steward
  А как же разный размер мониторов? Неужели приятно на 20+ мониторе смотреть сайт, подогнанный под 1024 пикселя (по ширине конечно)?
  1. Nikita Seleckis
    5 февраля 2010 г. в 17:24 / ответ на коммент Alexey.og
    Это тема для очередного холивара. Одни сторонники того, что всё должно растягиваться, а другие считают, что не нужно париться, а браузеры просто должны уметь зумировать сайт (Ctrl + колесико мышки).
    
    Local
    24 марта 2010 г. в 06:58 / ответ на коммент Nikita Seleckis
    В опере например зумирование идет вместе с картинками, что будет не очень приятно для конечного посетителя сайта.
2. Dimox
  18 декабря 2009 г. в 19:01 / ответ на коммент Steward
  Вот наглядный пример — http://v-tambove.ru/afisha По-моему, выглядит очень даже здорово.
spomoni
22 декабря 2009 г. в 14:32
Полезная фича, надо бы сохранить себе…

p.s. Читаю тебе по подписке уже год наверное, тут зашел, думал урлом сначала ошибся, дизайн другой совсем )
1. Dimox
  22 декабря 2009 г. в 16:08 / ответ на коммент spomoni
  Ты что-то путаешь. Этот дизайн уже года три стоит.
Живой
13 февраля 2010 г. в 23:04
А что есть еще люди, кто пользуется ИЕ ?!
Я вот недавно с Оперы на Хром перешел — почти всем доволен!
Опера зараза ресурсы жрет, а у мну комп дохловат.
А Хром хорош! Вот только один минус напрягает — горизонтальная прокрутка внизу. В Опере можно было настроить отображение «по ширине» и никаких проблем, а тут — не нашел у Хрома такой настройки. Если в курсе как это делается — подскажите!
А вчера плагин для Хрома нашел зашибатый — тИЦ показывает сайта, на котором находишься ;)
1. Ника Чудо
  6 марта 2010 г. в 21:53 / ответ на коммент Живой
  А чем же файрфокс не устраивает? Он жрёт ресурсов меньше чем Опера, и плагинов до кучи и тИЦ и ПР и много других показателей сайта будут показывать)
  1. Живой
    7 марта 2010 г. в 17:24 / ответ на коммент Ника Чудо
    Да против Лисы ничего не имею! )
    Но не идет он у меня (
    Раньше работал на нем — кульно все было.
    Но как-то после переустановки отказался работать — и что я ни делал — оживить его уже не мог. Тогдато и перешел на Оперу — единственный браз который стал у меня работать без капризов. Ну а щас вот Хрома юзаю и горя не знаю ))).
retorin
15 марта 2010 г. в 02:01
У меня три блога, из них на двух почему-то не работает.
Думаю шаблоны такие, так как бесплатные…
Andrio
16 марта 2010 г. в 04:56
Отлично!!!!!, это то что искал , завтра попробую свою идею реализовать , в закладки положил, у меня и в хроме (тоже на него перешёл, доволен) и в ИЕ норм кажет всё (приведённые примеры),респект автору))))
PS:сам тока недавно стал заниматься сайтом (потихоньку делаю для себя своими усилиями), тока вот интересно , такое исключительно таблицей можно реализовать , или на ДИВах тоже есть решение.Вопрос в том , что бы , например положить некоторое количество картинок в ряд (заключить каждую в свой див и может для неоходимости их в общий див положить), и в итоге посетитель сайта должен увидеть, не зависимо от разрешения своего монитора корректное изображение картинного ряда.Нужно такое чудо для того , что бы , при необходимости можно было что то добавить в ряд , или убрать, а в итоге всё работало )))), да и при этом это всё находилось на прозрачной подложке(фоновой картинке, например, какого нибудь прямоугольника с круглыми углами ), т.е своего рода некий блок поличится в итоге.Если кто нибуть снизойдёт и потратит время для описания подобного вопроса, было бы просто классно.И ещё один вопрос , такое способно работать при условии что таблица будет задана на какой то процент ширины ,к примеру 50%, или 30%, соответсвенно картинки будут при этом не значительных размеров (например 100х100).Заранее спасибо .
Пётр
16 марта 2010 г. в 17:35
Спасибо. незнал как делать резиновые изображение!!
harley
17 марта 2010 г. в 11:36
Кстати, резиновую верстку придумал Артемий Лебедев, уж не знаю на кол его ставить или боготворить. В буржнете до такого не додумались, их устраивали фиксированные сайты.
Andrio
17 марта 2010 г. в 14:59
……….уж не знаю на кол его ставить или боготворить.

Конечно боготворить, потому как у многих ещё наверно ,особенно у офисных работников, стоят мониторы не лучшего качества, и малого разрешения , а появлением горизонтальных скролов не способствует приятному восприятию самого сайта и поиска нужноуй инфы, потому как не весь контент сайта сразу виден.Лично я из за этого страдаю «резиной» )))
Мародер
7 мая 2010 г. в 16:39
Да когда уже этот браузер запретят-то законодательно… А резиновые сайты рулят)
Alex
6 июня 2010 г. в 20:55
Привет автору!
Сталкивался с этой проблемой. При резиновой верстке картинок нужно не забывать о контейнере. Если он тоже резиновый, а монитор широкий, качество картинки страдает.
Несколько человек мне об этом говорили, пришлось фиксировать размеры и картинок и контейнера. Либо, ставить на сайт значительно увеличенное изображение…
Может я не о том?
Как пример: Допустим, контейнер у нас резиновый, а картинка шириной в 500 пикселей, представляете что увидит посетитель, если она растянется пропорционально. Так что, этот способ годится только для фиксированной ширины контейнера.
Прошу извинить, если ошибся, я не спец в этом вопросе.
gabriella
21 марта 2011 г. в 12:03
всем здравствуйте в MSIE6 надо только max-width через всем известный expression ограничивать? пробовала еще и минимальную ограничить но когда начала изменять окно IE6 он просто завис,вот такой вот небольшой вопрос у меня появился
1. Dimox
  21 марта 2011 г. в 12:11 / ответ на коммент gabriella
  Да, только через expression.
Евгений
14 июля 2011 г. в 11:24
При указании table-layout: fixed; все колонки таблицы становятся равного размера, что в моем случае недопустимо, возможно ли оставить обычное поведение ячеек таблицы в этом случае, или здесь нужно привлекать js?
1. Dimox
  14 июля 2011 г. в 11:33 / ответ на коммент Евгений
  Видимо, только через JS.
Lion
27 сентября 2011 г. в 23:37
Вот спасибо! Столько я с этим мучился! Теперь хоть все норм!)))
Takasu
29 ноября 2011 г. в 05:56
Спасибо. Использовал для другой цени, но всё таки)
Елена
21 февраля 2012 г. в 17:09
border-collapse: collapse;
table-layout: fixed;

Вот это то, что меня спасло! А то мучалась, мучалась, в Опере нормально все отображалось, а в IE ну никак… ох уж этот ie… :))) …иногда плюнешь и думаешь «да пошел он… далеко и надолго», но педантичность моей натуры, чаще всего к сожалению, не позволяет мне оставить так как есть.

До этого перерыла много статей — Ваша помогла!
Спасибо огромное! ;)
Дмитрий
24 апреля 2012 г. в 12:55
Спасибо!
Antonio
21 декабря 2014 г. в 02:51
Спасибо большое за совет — помогло мне «зарезинить» блок подписки, который при масштабировании темы вылазил за пределы sidebar’a.
Андрей
2 декабря 2015 г. в 03:52
Перелопатил кучу примеров а ответ нашел здесь. Спасибо!

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

Смотрите также

Зеленый свет CSS-свойствам при верстке под IE8 и выше

Эмуляция псевдо-селектора :nth-child() в IE7 и IE8

CSS-трюк: двойные бордюры-разделители вертикального меню

CSS-трюк: фиксируем большой бэкграунд относительно контента

Комментарии (33)

Ваш комментарий