, В этом случае это становится совершенно новой проблемой. Vh и vw - это единицы браузера, которые определяются на основе размера экрана, поэтому мы не можем использовать их для определения обрезанного изображения. Я думаю, что было бы безумно пытаться сделать это, но я рекомендую вам задать новый вопрос, подробно описывающий все это, и, возможно, мы сможем найти обходной путь для достижения того, чего вы хотите

ано изображение в формате JPEG, которое нужно обрезать с помощью CSS, а затем расширить для соответствия1200px x 1000px коробка.

Вот что у меня так далеко:

#top-image {
    display: block;
    clip-path: inset(0px 103px 45px 105px);
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    height: 1000px;
}
<img src="https://via.placeholder.com/750x500" id="top-im,age">

clip-path свойство культур первоначальное изображение, которое является750px x 500px, Когда я устанавливаю ширину и высоту в значения, указанные в приведенном выше фрагменте, возникают две проблемы:

Значения пикселей, используемые вclip-path основаны на новом1200 x 1000 коробка, а не для исходного изображения.

Исходное (не скрещенное) изображение (включая обрезанные части) расширяется до рамки. Тем не менее, я хотел бы расширить обрезанное изображение, чтобы заполнить поле.

Каков наилучший способ сделать это с использованием чистого CSS?

Обновление 1: Я могу решить первые проблемы, используя проценты вместо пикселей.

Ответы на вопрос(1)

Ваш ответ на вопрос