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

Блоггер / Блог 2016 год

RSS лента новостей, Подписка по Email

      Решение не работающего 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 и уже ему прописать максимальную ширину.

         
         
Главная, 1,
( 44 )