Я хочу поместить и обрезать/обрезать изображение внутри элемента div, который также является элементом сетки. Я пробовал ⇐ CSS

[Anonymous]

Итак, я пытаюсь выполнить задание по сетке бенто от наставника по интерфейсу. В одной части мне требуется обрезать/обрезать элемент изображения, и он не должен перекрываться за пределами элемента div. Мне разрешено использовать для этого только HTML и CSS. Многие люди использовали для этого попутный ветер, но я пытаюсь создать его с нуля.
Вот что я сделал
HTML:

Код: Выделить всё

Maintain a consistent posting schedule.
[img]./assets/images/illustration-consistent-schedule.webp[/img]

CSS:

Код: Выделить всё

  .bento3 > img {
background-size: cover;
width: 100%;
height: auto;
margin-top: 14px;
}

Вот как это должно выглядеть на самом деле
Имейте в виду, что это не обрезка. Изображение должно появиться на экранах разных размеров. Например, если я уменьшу размер экрана, это будет выглядеть так:
Для экрана размером 768 пикселей
Для размера экрана 610 пикселей
Дайте мне знать, что мне следует сделать, чтобы добиться этого.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ent-as-wel