Так верстают только...

Ты действительно хочешь, чтобы все без объяснений полезли на этот сайт?

Могу то же самое сказать про имгур. У меня хотя бы прямой линк на картинку. Если так страшно зайди через тор/vpn с чистого профиля браузера

Мой ключевой тейк «без пояснений». А имя сайта усугубляет

Добавил пояснение. Я в любом случае сомневаюсь что что-то исправят

Как в каком браузере не меняя position такое получить?

Firefox андройдовый второй свежести

Firefox андройдовый второй свежести

Ну хорошо что сказал, а то в обычном ФФ и хроме все ок

О, я так и думал что где-то налажал, но не мог найти где. А что, нет возможности обновиться?

Я полез ради интереса, это просто нода мастодона.

Мастурбатедон, да, как Илон Маск завещал
https://www.snopes.com/fact-check/musk-tweet-mastodon-masterbatedone/

Практически нет. свежий firefox уж очень много весит. Андройду с a/b разделами слишком тесно на 64гб. servo тоже жирный. apk прсото не ставятся даже если пару гигов освободить, а больше пока не могу. Можно прошивку поменять на более компактную и с другой разметкой разделов, но честно говоря на настроенном много лет назад работающем устройстве этого делать совсем не хочется, всё с нуля придётся ставить.

Кстати, в pale moon проблема тоже есть, а он уже не такой старый

А что оно вообще должно было делать? У меня тег <a> содержащий ссылку идёт в полную ширину, а внутри position:absolute, без указания position в классе родительского элемента и без указания координат. Как это должно работать? Откуда пришло центрирование я правда не понял, скорее всего какой-то из родительских компонентов. Но картинка, у которой absolute в позиции не будет растягивать внешний контейнер, потому она и налазит на текст

Смена position:absolute на relative в теге картинки исправляет проблему для картинок в постах

Так должно выглядеть?

На глагне relative тоже помог
было
стало

После недавнего обновления

все как то мелко стало, раньше zoom был 125% - теперь 150%.

А что оно вообще должно было делать? У меня тег содержащий ссылку идёт в полную ширину, а внутри position:absolute, без указания position в классе родительского элемента и без указания координат. Как это должно работать?

Это старые извращения, в том плане что оно давно так устроено. Идея описана вот тут: https://codecaptain.io/blog/web-development/responsive-images-and-preventing-page-reflow/474

Я приделал еще скукоживание вертикальных изображений, чтобы их высота не превышала 90% видимой части окна браузера. И приделал туда центрирование.

Смена position:absolute на relative в теге картинки исправляет проблему для картинок в постах

Позже попробую, если никаких побочек не будет то поменяю. Но уже не сегодня.

Код по ссылке у меня отображается нормально, если не считать не загрузившейся картинки, плейсхолдер у неё правильного размера и сдвигает текст вниз. Там правда ситуация немного отличается: у картинки указано заполнение на 100%, а сама картинка располагается непосредственно в responsive-container, а не в дочернем <a>.
Я правда так и не совсем понял, как это работает, ведь position:absolute заставляет компонент не влиять на размеры контейнера. Может какие-то хитрые display меняют это поведение?
Если это действительно так задумано, а не какая-то неоднозначность css, возможно стоит баг в UXP зарепортить, но тогда надо чётко понять, почему оно развалилось и как именно должно было работать.
Я бы если подобный css писал - сделал бы у картинки relative т.к мне нужно чтобы размеры картинки установили высоту содержащих её контейнеров (href/div), а absolute это исключает, делая из контейнера просто якорь для просчёта позиции

P.S
https://developer.mozilla.org/en-US/docs/Web/CSS/min
Убрал его и заработало как надо без relative. В оригинальном примере никакого min нету.

Я правда так и не совсем понял, как это работает, ведь position:absolute заставляет компонент не влиять на размеры контейнера.

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

Код по ссылке у меня отображается нормально

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

сли это действительно так задумано, а не какая-то неоднозначность css

Вот тут не знаю, я не на 100% понимаю как оно должно работать по спецификации.

Да нашёл уже. У меня css min не поддерживается в обоих браузерах В последней версии pale moon должно работать.
Можно вместо min() использовать min-height:90vh

А absolute там видимо намеренно сделан, чтобы контейнер не подстраивался под изображение, тогда всё логично, просто здесь высота контейнера счиатется нулевой и всё ломается

А точно дело в «min»? Вроде он с FF 75 должен работать, а это апрель 2020.

ну так не везде браузеры новее апреля 2020, я просто ставил тот, у которого apk был меньше
В pale moon был реализован несколько позже:
https://repo.palemoon.org/MoonchildProductions/UXP/issues/2230
но сейчас у меня временно более старая версия, т.к обходил один баг

мой дефолтовый прокруст.цсс всё равно всё по-моему перевёрстывает тщмт

Я нашел извратный способ, благодаря которому в свежем Pale Moon оно стало норм рендериться. Хотя блоки в dev tools выглядят подозрительно.

Проверь на своих устройствах plz.

Спасибо, всё починилось :)