Дикий, ты лучший, не останавливайся

max-width не работает в Firefox и IE 11 для изображений. И буду рад, если кто-то знает другое решение :)

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

Решение довольно простое: Мы дополнительно задаем изображению width: 100% (не забываем про height: auto).
Картинка растягивается на весь контейнер и уменьшается вместе с ним. Как минус - нужно очень точно указывать стили, чтобы не растягивать маленькие изображения.

Если у разных картинок нет разных классов, иногда можно воспользоваться медиа запросами и CSS селекторами.
Например: img[src$="-560.jpg"] {width: 100% !important; height: auto !important;}


Есть еще одно нудное и долгое решение.
Указывать каждому изображению width: 100%; height: auto; max-width: 800px; max-height: 600px;
Где 800 и 600 я указал просто для примера. Тут max-height больше всего нужен для IE 11. Там все будет работать корректно только в том случае, если на сайте указан доктайп.

А если для изображения задать такой класс <img class="klass".....

.klass {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}

Вот что нашел по этому: Сейчас проверю, но ИЕ 11 и Фаерфокс что-то там не указан.
(Проверил, не работает).

Кстати, тест проблемы: http://dikij.com/test.php

Код

Вроде работает. Проверьте и напишите я удалю тест файл.

Для начала, там нет таблицы у вас. А это важно :)
Думаю, нужно было подробнее написать, что дело именно в дочернем элементе (или как это называется?)

Но любопытно, да, что картинка в Боди с max-width: 100% действительно уменьшается.

Адаптивные таблицы при помощи только CSS стилей 2

Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой:

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

Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody.
У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку.

Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. :)


Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?
Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.

Спасибо за отзывы!

Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно.

Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей.

А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан:

Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.
А вот добавление table:before c display: table-cell растягивает содержимое на 100%.
Магия :)

Ну и важный момент про шрифты!
Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.
Да и 12 пикселей - это уже совсем мелко для телефона.

Встретил тут на одном форуме код "как уменьшить весь сайт при уменьшении ширины экрана".
Написал свою версию для примера. Так делать не нужно! :D:D:D

Без использования зума, так как он не кроссбраузерный вообще.

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

Вот все решения, которые удалось найти:

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

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

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

4) В интернете прочитал, что можно поместить картинку в контейнер и прописать ему максимальные значения картинки. Но вот зачем - я не понимаю. Проще уж как в 1 пункте.

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