Антон Антон, можно, но я решил заморочится. Плюс хорошо, если будет возможность замены фото без необходимости использовать графический редактор для подготовки новго фото
Ankhena, все оказалось гораздо проще. Круг на фоне плюс border-radius: 0 0 95px 95px; для самого фото. Я только сейчас обнаружил, что скругление в форме круга можно получить, указав значение в пикселях, а не процентах (до этого радиус в 50% давал форму овала, так как изображение не квадратное.)
Остаслось выяснить формулу, почему нужно указывать именно 95 при ширине фото 118
sergski, object-fit определяет как отрисовывать содержимое тега img, он не имеет отношения к самими размерам тега.
Вложенность я уменьшить не могу, разве увеличить
Ankhena, в моем примере фото выходит далеко за пределы родительского блока. Его высота должна равняться высоте красной рамки (родитель), а красная рамка по ширине должна быть равна ширине фото
Такое же поведение https://codepen.io/coyibe2003/pen/GRLEPBL, но тут высота прописана прямо для img, а не для root
Хотя тут та же ошибка, что допустил и я, но ваш пример помог разобраться.
Нашел в спецификации, что делитель в calc должен быть числом. То есть без 'px' в переменных все работает.
Александр Васильев, у меня в примере этот параметр используется. Задача в том, что если слайдер занимает 1000px, а внутри два слайда по 200px, то они автоматически должны растягиватся на всю доступную ширину.
При этом если слайдер имеет размер 300px, то слайды занимают все те же 200px каждый, но теперь есть возможность прокрутки.
Я пробовал это сделать, добавив слайдам flex-grow: 1, но в этом случае если рассматривать пример выше при размере слайдера более 400px он резервирует место под третий слайд, хотя их только два.
Andrey Vasilev, это готовое решение, которое полностью подходит под мою задачу. При условии, что оно корректно работает.
А так придется самому реализовывать тач прокрутку с помощью мыши, кастомный скроллбар. Есть опасения, что я не знаю каких-то нюансов, и мое решение не будет работать правильно на всех устройствах.
Сергей delphinpro, я целиком и обрисовал. Для понимания задачи этого достаточно.
А ваш пример с display: contents формально хоть и не меняет html, но по факту удаляет один из элементов