Ссылки Поиск Написать В избранное NO

Решение не работающего max-width для изображений в таблицах (Firefox и IE)

Я уже писал, что max-width не работает в Firefox и IE 11 для изображений в таблицах, теперь вот решил собрать в одном месте все решения этой проблемы. Пятый раз, правда начинаю писать пост и удаляю случайно.


1) Прописываем width: 100% изображению. После этого оно начнет корректно ужиматься. Только я советую добавить height: auto. В идеале, можно еще использовать max-width с max-height. И в них указать размер картинки.


2) Добавить таблице table-layout: fixed. После этого картинки внутри будут корректно ужиматься. Просто чудо какое-то.


3) Можно вообще полностью избавиться от таблицы, прописав ячейкам display: block. Бывает очень удобно в адаптивной верстке, когда ячейки нужно еще и разместить друг под другом.


4) В сети есть еще один способ. Поместить картинку в контейнер и прописать ему максимальные значения картинки... но мне он обычно не подходит. Да и проще тогда вернуться к 1 пункту.


Сразу добавлю, что по спецификации max-width не работает и для самой таблицы. Сейчас многие браузеры это значение прекрасно понимают, но лучше обернуть таблицу в div и уже ему прописать максимальную ширину.