Блог

Итак, у меня есть следующий код css:

 .crop img{
    max-width: 100%;
    position: relative;
    top: -50%;
    /* width:100%; */
    border-radius: 10px 10px 0px 0px;
    object-fit:cover;
    object-position: center;
}
  

Что делает этот код, так это берет изображение с URL-адреса, помещает его в div, который у меня есть, заполняет div, затем перемещает вверх на 50%, так что средняя половина изображения отображается в моем div. Проблема здесь в том, что div, в котором находится мое изображение, имеет закругленные углы в верхнем левом и правом углу, но, увеличив изображение на 50%, я не могу подтвердить, что изображение соответствует закругленным углам (см. Изображение ниже).

Могу ли я что-нибудь сделать, чтобы изображение вписывалось в закругленные углы div, не объявляя их вручную? Есть ли какой-нибудь inherit тег или что-нибудь еще, что я могу использовать? К сожалению, я не могу привести рабочий пример моей проблемы, поскольку он заблокирован за страницей входа.

Просто добавьте {overflow: hidden} к своему div .

Если кому-то интересно, ответ любезно предоставлен @wilkoklak, который говорит использовать overflow:hidden; в родительском div с закругленными углами. Спасибо, wilkoklak!