, В этом случае это становится совершенно новой проблемой. 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: Я могу решить первые проблемы, используя проценты вместо пикселей.