Войти в систему

Home
    - Создать дневник
    - Написать в дневник
       - Подробный режим

LJ.Rossia.org
    - Новости сайта
    - Общие настройки
    - Sitemap
    - Оплата
    - ljr-fif

Редактировать...
    - Настройки
    - Список друзей
    - Дневник
    - Картинки
    - Пароль
    - Вид дневника

Сообщества

Настроить S2

Помощь
    - Забыли пароль?
    - FAQ
    - Тех. поддержка



Пишет dibr ([info]dibr)
@ 2012-08-20 14:58:00


Previous Entry  Add to memories!  Tell a Friend!  Next Entry
max-width
     Продолжаю терзать несчастный стиль max-width.
     Несколько постов назад запостил широкую (1600px) фотку, без ката, но добавив в img стиль style="max-width:90%". Проверил "на себе" (на своей френдленте, на френдленте произвольного взаимофренда, проверялось в хроме) - всё масштабировалось нормально.
     Сейчас выяснил, что в ряде случаев этот img таки рвёт ленту - например, при просмотре в FF. Хотя при этом по inspect element выдаётся, что max-width ничем не перекрыт и активен.
     У кого-нибудь ещё тот пост (с ночной фоткой) ленту рвал? Есть идеи, как предотвратить (кроме явного задания ширины в пикселях и/или прятания под кат)? Или, может быть, я где-то лажанулся и не заметил?
     !important пробовал - с ним вообще магия происходит: в хроме всё работает как и работало (и !important в коде страницы есть, я проверял), а в опере и ФФ - из кода страницы(!) исчезает этот самый !important. Что лично меня несколько фрустрирует - ладно, допустим жежешечка сама срезает "опасные" по её мнению стили, но не селективно по браузерам же :-)

     UPD: I win, I win!!! Просто style="max-width:90%!important" недостаточно, надо дополнительно явно указать width="90%"! Тогда, тьфу-тьфу, не рвёт. Но вообще бардак по-моему. Если width не указан - должен использоваться naturalwidth (или как там его), если указан max-width - width должен ограничиваться по max-width, если ширина указана в процентах, по стандарту она берётся "от ширины родительского элемента". И в хроме всё так и есть, а в ФФ - нет. Если же я указал width=90% и max-width=90%, то во-первых это тавтология (90%, но не более 90%), а во-вторых при этом получается что на широком экране (с охватывающим элементом больше naturalwidth) я прошу браузер увеличить картинку больше чем она есть! Но этого - не происходит, картинка остаётся естественного размера. То есть получается что надо бы мне сделать width=90%, а max-width - равным naturalwidth, но что-то не очень хочется это тестировать - а ну как опять сломается. Бардак, в-общем :-/
     В подспойлерную фотку добавил width="90%" - проверьте теперь, не рвёт ли? И, это. Если у меня чего кого рвёт и мечет - пишите сразу, ок? А то я ведь могу и не знать, что кому-то ленту разорвал :-)



(Добавить комментарий)


[info]starcat13@lj
2012-08-20 08:03 (ссылка)
в FF рвет, подтверждаю. :(

(Ответить)


[info]vetka_nn@lj
2012-08-20 08:04 (ссылка)
ФыФы. Импортант в коде есть. Ленту рвёт.

Сдается мне, ты не туда этот макс-видс применяешь, поскольку в таком виде он ставит 95% от исходного размера картинки. Попробуй засунуть картинку с тем же стилем в див с шириной 100% - чо получится?

(Ответить) (Ветвь дискуссии)


[info]dibr@lj
2012-08-20 08:15 (ссылка)
Вроде как "В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера", то есть формально я прав.

Див 100% - это как? width="100%"? Или style="max-width:100%!important"?
Впрочем, и так и так не работает :-(

(Ответить) (Уровень выше) (Ветвь дискуссии)


[info]vetka_nn@lj
2012-08-20 08:23 (ссылка)
<div style="width: 100%; overflow: auto;"><img src="..." style="max-width:95%!important; /></div> - как-то так. Или, если оно неадекватно отреагирует на див 100%-ной ширины - диву тоже сделать ширину, например, 99%.

(Ответить) (Уровень выше)


[info]vetka_nn@lj
2012-08-20 08:26 (ссылка)
Ага, вот апдейтнутое - не рвет. Ни в ленте, ни в каментах.

(Ответить) (Уровень выше) (Ветвь дискуссии)


[info]dibr@lj
2012-08-20 08:33 (ссылка)
Обновлённое - c width=90% в img.

Но вообще бардак по-моему. Если width не указан - должен использоваться naturalwidth (или как там его), если указан max-width - width должен ограничиваться по max-width, и в хроме всё так и есть, а в ФФ - нет.
Если же я указал width=90% и max-width=90%, то во-первых это тавтология (90%, но не более 90%), а во-вторых при этом получается что на широком экране (с охватывающим элементом больше naturalwidth) я прошу браузер увеличить картинку больше чем она есть! Но этого - не происходит, картинка остаётся естественного размера. Попробовать что-ли max-width поставить 1600px, или уж лучше не рисковать?

Бардак :-/

(Ответить) (Уровень выше) (Ветвь дискуссии)


[info]thecomicz@lj
2012-08-26 16:53 (ссылка)
width:auto пробовал?

(Ответить) (Уровень выше) (Ветвь дискуссии)


[info]dibr@lj
2012-08-26 17:19 (ссылка)
Нет, не пробовал.
Сейчас пробовать не буду, но в следующий раз поэкспериментирую :-)

(Ответить) (Уровень выше)


[info]mikell@lj
2012-08-20 08:05 (ссылка)
FF 14.01
Фотка вылезла за правую границу, включилась горизонтальная прокрутка.

(Ответить)


[info]borishighlander@lj
2012-08-20 08:15 (ссылка)
Рвет ленту, FF 14.0.1

(Ответить)


[info]termsl@lj
2012-08-20 08:18 (ссылка)
Хром, все в поряде, рвет лису.

(Ответить)


[info]vlkamov@lj
2012-08-20 08:21 (ссылка)
Во френдленте она была маленькая, а сейчас, при просмотре этгго поста действительно шире экрана.
FF 10.0.1

(Ответить)


[info]xelenka@lj
2012-08-20 08:28 (ссылка)
iceweasel 10.0.6 на крошечном нетбуке - все ок и в ленте и тут

(Ответить)


[info]sudzume@lj
2012-08-20 08:35 (ссылка)
У меня ФФ, вчера порвало ленту, причём так изощрённо,
что скрыты все кнопки управления, какая-то фоновая картинка
заслоняет весь экран, вообще френдленту не посмотреть.
Это было оно? Сейчас нормально.

(Ответить) (Ветвь дискуссии)


[info]dibr@lj
2012-08-20 08:38 (ссылка)
Это вряд ли был я - у меня просто широкая (1600px) картинка, появился бы горизонтальный скроллер, но без фатальных последствий :-)
Но что сейчас всё хорошо - это хорошо :-)

(Ответить) (Уровень выше)


[info]_frame_@lj
2012-08-20 08:42 (ссылка)
FF. Рвало. Теперь не рвёт. :)

(Ответить)


[info]ilya_314@lj
2012-08-20 10:11 (ссылка)
Порви их всех!

(Ответить)


[info]arbena@lj
2012-08-20 10:31 (ссылка)
фф, ленту не рвет.

(Ответить)


[info]dru4@lj
2012-08-21 05:12 (ссылка)
Все верно, ты максимальный ограничил, а текущий не задал. Я когда лет 10 назад занимался версткой, чуть не посидел, несмотря на то что был в11 классе :-)

(Ответить) (Ветвь дискуссии)


[info]dibr@lj
2012-08-21 08:02 (ссылка)
Но это же нелогично - если я задал максимальный размер, то текущий не может быть больше максимального! Ещё нелогичнее то, что когда я сую это в custom css в ЖЖ, чтобы мне не "рвали ленту" чужие картинки - оно работает. Впрочем... я-то проверял только в хроме (и ещё в андроидном браузере, но там могут быть свои заморочки), может быть на самом деле оно и не работает...

...когда я первый раз занимался вёрсткой, css был только в проекте, а актуальная вёрстка делалась в основном таблицами. Хорошее время было - вся страница содержится сама в себе, глюков под названием "не загрузились стили" не было... :-)

(Ответить) (Уровень выше) (Ветвь дискуссии)


[info]dru4@lj
2012-08-21 08:35 (ссылка)
Какому-то браузеру логично, какому-то нет. Тяжело всем угодить.

Да даже с таблицами косяки были, у разных браузеров по разному различные отступы обрабатывались :-)

(Ответить) (Уровень выше)