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

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

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

      Max-width не работает в Firefox и IE 11 для изображений (тег img) в таблицах

         При недавней переделке сайта florets.ru возникла потребность очень корректно уменьшать огромное количество фотографий разных размеров.
         Большинство современных браузеров вполне корректно понимают max-width: 100% и уменьшают изображение, если оно не помещается в контейнер. С IE 11 и Firefox такого не происходит. По какой-то причине эти браузеры считают, что max-width: 100% относится к истинной ширине изображения, а не к ширине в контейнере.
         Демка.

         Решение для max-width в Фаерфоксе и ИЕ 11 довольно простое:
         Мы задаем изображению width: 100% (не забываем про height: auto). Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения. К сожалению, в данном случае у фотографий разных размеров не было разных классов. И мне пришлось воспользоваться медиа запросами и CSS селекторами. Например: img[src$="-560.jpg"] {width: 100% !important; height: auto !important;}
         Тут видно, что прямо в URL адресе картинки указан ее размер, на который мы и ориентируемся. При том, что другим способом именно эту картинку никак «выловить» на сайте было нельзя.
         Понятно, что можно спокойно растягивать такое изображение при ширине окна 560px и меньше. И этого никто не заметит.

(17.03.2016 blogger) Мобильная версия сайта florets.ru - Разработка адаптивного дизайна

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