Проблема с закругленными углами изображения при подгонке объекта: содержатCSS

Разбираемся в CSS
Ответить
Гость
 Проблема с закругленными углами изображения при подгонке объекта: содержат

Сообщение Гость »


Я хочу показать изображение с закругленными углами. Таким образом, изображение должно растягиваться до контейнера, но не обрезать какую-либо часть, как, например, object-fit: contains. Однако border-radius применяется к элементу изображения, а не к содержимому изображения. Вот пример (также JSFiddle):

body { ширина: 100vw; высота: 100вх; маржа: 0; } дел { ширина: 100%; высота: 100%; } изображение { ширина: 100%; высота: 100%; соответствие объекта: содержать; радиус границы: 20%;
Изображение


Вы можете проверить, как это работает, изменив размер области просмотра.

Итак, есть ли способ заставить элемент изображения изменять размер своих границ в обоих направлениях, чтобы приспособиться к контейнеру, точно так же, как это делает object-fit?
>
Или, может быть, есть способ применить к содержимому изображения фильтр «обрезка по прямоугольникам со скругленными углами»?
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»