17.03.2016, 19:41 | #22 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
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. Там все будет работать корректно только в том случае, если на сайте указан доктайп.
__________________
Делаю кулоны с опалами в стекле и не только! |
17.03.2016, 20:32 | #23 |
Специалист
Регистрация: 16.06.2013
Сообщений: 322
Вес репутации: 152
|
|
17.03.2016, 21:15 | #24 | ||
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Вот что нашел по этому:
Цитата:
(Проверил, не работает). Кстати, тест проблемы: http://dikij.com/test.php Код Цитата:
__________________
Делаю кулоны с опалами в стекле и не только! Последний раз редактировалось D.iK.iJ; 17.03.2016 в 21:24. |
||
17.03.2016, 23:41 | #26 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Цитата:
Думаю, нужно было подробнее написать, что дело именно в дочернем элементе (или как это называется?) Но любопытно, да, что картинка в Боди с max-width: 100% действительно уменьшается.
__________________
Делаю кулоны с опалами в стекле и не только! |
|
24.03.2016, 16:14 | #27 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Адаптивные таблицы при помощи только CSS стилей 2
Развивая идею адаптивных таблиц, сделал такое вот интересное решение с прокруткой: Цитата:
Потом назначаю тегу table ширину 100% и делаю его контейнером с прокруткой для самой таблицы, роль которой теперь будет играть tbody. У последнего я еще чуть уменьшил ширину, так как часть ее уходит на рамку. Все это позволило сделать адаптивные таблицы с большим количеством колонок красивыми. Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему? Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.
__________________
Делаю кулоны с опалами в стекле и не только! |
|
04.04.2016, 20:30 | #28 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Спасибо за отзывы!
Сегодня хочу добавить интересное. Адаптивные таблицы при помощи CSS стилей 3. Справляемся с thead и tbody одновременно. Я уже писал про адаптацию таблиц для мобильных устройств. И писал про адаптивные таблицы при помощи стилей. А в этот раз у таблиц на сайте клиента был не только tbody, но и thead. И если делать прокрутку по старому варианту, они сжимаются не одинаково, а в зависимости от содержимого. Поэтому CSS был мной немного переделан: Цитата:
А вот добавление table:before c display: table-cell растягивает содержимое на 100%. Магия Ну и важный момент про шрифты! Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую. Да и 12 пикселей - это уже совсем мелко для телефона.
__________________
Делаю кулоны с опалами в стекле и не только! |
|
22.04.2016, 21:41 | #29 | |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Встретил тут на одном форуме код "как уменьшить весь сайт при уменьшении ширины экрана".
Написал свою версию для примера. Так делать не нужно! Цитата:
__________________
Делаю кулоны с опалами в стекле и не только! |
|
28.04.2016, 16:37 | #30 |
Дикий
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,551
Вес репутации: 360
|
Я тут уже писал, что 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 и ему прописать максимальную ширину.
__________________
Делаю кулоны с опалами в стекле и не только! |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Оптимизация сайта | koctik | Общие вопросы оптимизации | 5 | 13.07.2013 15:23 |
SEO оптимизация сайта | birja | Общие вопросы оптимизации | 2 | 13.04.2012 10:54 |
Задачка... 3 строчки на JS. Хелп! | MonAmur | Разработка и сопровождение сайтов | 3 | 08.10.2009 14:50 |
Оптимизация сайта | sunplant | Общие вопросы оптимизации | 9 | 25.11.2008 09:15 |
оптимизация сайта :( | pha | Яндекс | 1 | 10.12.2007 15:54 |
Часовой пояс GMT +3, время: 23:51.