Старый 06.03.2016, 20:30   #21
Эксперт
 
Аватар для poplop
 
Регистрация: 24.05.2008
Сообщений: 1,632
Вес репутации: 215
poplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущееpoplop - прекрасное будущее
По умолчанию

Дикий, ты лучший, не останавливайся
poplop вне форума   Ответить с цитированием
Старый 17.03.2016, 19:41   #22
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

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. Там все будет работать корректно только в том случае, если на сайте указан доктайп.
D.iK.iJ вне форума   Ответить с цитированием
Старый 17.03.2016, 20:32   #23
Специалист
 
Регистрация: 16.06.2013
Сообщений: 332
Вес репутации: 78
poster - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личность
По умолчанию

Цитата:
Сообщение от D.iK.iJ Посмотреть сообщение
буду рад, если кто-то знает другое решение
А если для изображения задать такой класс <img class="klass".....

.klass {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
poster вне форума   Ответить с цитированием
Старый 17.03.2016, 21:15   #24
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Вот что нашел по этому:
Цитата:
width: 100% \9; // Force IE10 and below to size SVG images correctly
Сейчас проверю, но ИЕ 11 и Фаерфокс что-то там не указан.
(Проверил, не работает).

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

Код
Цитата:
<table border="1" width="100%"><tr><td>
<img style="max-width: 100%;" src="http://dikij.com/foto/661.jpg">
</td></tr></table>

Последний раз редактировалось D.iK.iJ; 17.03.2016 в 21:24.
D.iK.iJ вне форума   Ответить с цитированием
Старый 17.03.2016, 21:49   #25
Специалист
 
Регистрация: 16.06.2013
Сообщений: 332
Вес репутации: 78
poster - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личностьposter - просто великолепная личность
По умолчанию

Цитата:
Сообщение от D.iK.iJ Посмотреть сообщение
(Проверил, не работает)
Вроде работает. Проверьте и напишите я удалю тест файл.
poster вне форума   Ответить с цитированием
Старый 17.03.2016, 23:41   #26
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
По умолчанию

Цитата:
Сообщение от poster Посмотреть сообщение
Вроде работает. Проверьте и напишите я удалю тест файл.
Для начала, там нет таблицы у вас. А это важно
Думаю, нужно было подробнее написать, что дело именно в дочернем элементе (или как это называется?)

Но любопытно, да, что картинка в Боди с max-width: 100% действительно уменьшается.
D.iK.iJ вне форума   Ответить с цитированием
Старый 24.03.2016, 16:14   #27
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

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

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

Цитата:
table {border: 1px solid #333333;
width: 100% !important;
overflow: auto !important;
display: block !important;
}
table tbody {display: table !important;
width: 99.9% !important;}
Здесь я обвожу таблицу рамкой, чтобы было понятнее, что она не обрезана.

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

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


Почему не обернуть table, например, элементом div и не применить стили и прокрутку уже к нему?
Дело в том, что на сайтах бывает очень много таблиц. А у меня обычно доступ только к стилям. И для каждой правки требовалось бы отдельно просить администратора внести изменения.
D.iK.iJ вне форума   Ответить с цитированием
Старый 04.04.2016, 20:30   #28
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

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

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

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

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

Цитата:
table {border: 1px solid #333333; display: block !important; width: 99% !important; overflow: auto !important;}
table:before {content: ""; display: table-cell !important; overflow: auto !important; width: 1% !important;}
Если использовать только первую строку стилей, таблица будет сжиматься нормально. Но вот растягиваться на 100% она не хочет. Только по ширине содержимого.
А вот добавление table:before c display: table-cell растягивает содержимое на 100%.
Магия

Ну и важный момент про шрифты!
Все что меньше 12px - не пройдет проверку в новом Яндекс Вебмастере! Кажется, там есть определенный порог по количеству слов (или символов) на странице - со шрифтом такого размера. Но я обычно не рискую.
Да и 12 пикселей - это уже совсем мелко для телефона.
D.iK.iJ вне форума   Ответить с цитированием
Старый 22.04.2016, 21:41   #29
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Exclamation

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

Цитата:
<style>
@media screen and (max-width: 768px) {
html{
width: 100%;
height: 150%;
}
body{
transform:scale(0.5);
transform-origin: center top;
}
}
@media screen and (max-width: 384px) {
html{
width: 100%;
height: 175%;
}
body{
transform:scale(0.25);
transform-origin: center top;
}
}
</style>
Без использования зума, так как он не кроссбраузерный вообще.
D.iK.iJ вне форума   Ответить с цитированием
Старый 28.04.2016, 16:37   #30
Дикий
 
Аватар для D.iK.iJ
 
Регистрация: 02.06.2007
Адрес: <Noindex>
Сообщений: 2,515
Вес репутации: 285
D.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущееD.iK.iJ - прекрасное будущее
Lightbulb

Я тут уже писал, что 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 и ему прописать максимальную ширину.
D.iK.iJ вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация сайта 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, время: 01:56.