Как развернуть обрезанное изображение в коробку?

Question

Мне дано изображение в формате 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-image">

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

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

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

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

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

Answer 1

Используйте фон для этого и настройте background-size / background-position:

#top-image {
    display: block;
    /*clip-path: inset(0px 103px 45px 105px);*/
    width: 1200px;
    height: 1000px;
    background-image:url(https://picsum.photos/1200/1000?image=0);
    
    background-size:
      calc(100% + 103px + 105px) /*100% of the width + the cropped part*/ 
      calc(100% + 45px); /*100% of the height + the cropped part*/
    background-position:
      -103px /*we shift to the left to crop the 103px*/
      0; /*we keep at the top and the bottom will be cropped*/
}

<div id="top-image"></div>

Выше будет обрезать пиксель в зависимости от контейнера.Если вам нужно обрезать в зависимости от размера изображения, вы делаете это:

#top-image {
    display: block;
    /*clip-path: inset(0px 103px 45px 105px);*/
    width: 1200px;
    height: 1000px;
    background-image:url(https://picsum.photos/750/500?image=1069);
    
    background-size:
      calc(750px*(1200/(750 - 103 - 105)))  
      calc(500px*(1000/(500 - 45))); 
    background-position:
      calc(-103px*(1200/(750 - 103 - 105))) 
      0; 
}

<div id="top-image"></div>

Ваше изображение имеет высоту 500px, и вы хотите обрезать 45px, таким образом, у нас будет 455px, который должен покрыть 1000px, поэтомунам нужно умножить на 1000/455.Та же логика с шириной.Для позиции нам нужно сместить на 103px кадрирование с учетом того же умножения.

---

Мы также можем написать это по-другому.

Я буду использовать изображение ниже (300x150) что я обрежу 100px слева, 60px справа, 10px сверху и 45px снизу.Затем он покроет контейнер размером 400x200.Мы должны видеть только желтую часть.

.image {
    display: block;
    margin:5px;
    width: 400px;
    height: 200px;
    background-image:url(https://i.stack.imgur.com/Xde45.png);
    
    background-size:
      calc(300px*(400/(300 - 100 - 60))) 
      calc(150px*(200/(150 - 10  - 45))); 
    background-position:
      calc(-100px*(400/(300 - 100 - 60))) 
      calc(-10px *(200/(150 - 10  - 45)));
}
.alt {
    background-size:
      calc(100% + (100 + 60)*(400px/(300 - 100 - 60))) 
      calc(100% + (45 + 10) *(200px/(150 - 10 -  45))); 
    background-position:
      calc(-100*(400px/(300 - 100 - 60))) 
      calc(-10 *(200px/(150 - 10  - 45)));
}
.alt2 {
  --c-left:100;  /*crop left*/
  --c-right:60;  /*crop right*/
  --c-bottom:45; /*crop bottom*/
  --c-top:10;    /*crop top*/
  --c-x:calc(var(--c-right) + var(--c-left));
  --c-y:calc(var(--c-top) + var(--c-bottom));
  background-size:
      calc(100% + var(--c-x)*(100%/(300 - var(--c-x)))) 
      calc(100% + var(--c-y)*(100%/(150 - var(--c-y)))); 
    background-position:
      calc(-1*var(--c-left)*(400px/(300 - var(--c-x)))) 
      calc(-1*var(--c-top) *(200px/(150 - var(--c-y)))) ;
}

<div class="image"></div>
<div class="image alt"></div>
<div class="image alt2"></div>

Мы можем воспользоваться последним синтаксисом и рассмотреть возможность использования более переменных, чтобы они были более динамичными и отзывчивыми:

.image {
    display: block;
    margin:5px;
    width: var(--w,400px);
    height: var(--h,200px);
    background-image:url(https://i.stack.imgur.com/Xde45.png);
    --c-left:100;  /*crop left*/
    --c-right:60;  /*crop right*/
    --c-bottom:45; /*crop bottom*/
    --c-top:10;    /*crop top*/
    
    --c-x:calc(var(--c-right) + var(--c-left));
    --c-y:calc(var(--c-top) + var(--c-bottom));
    background-size:
      calc(100% + var(--c-x)*(100%/(300 - var(--c-x)))) 
      calc(100% + var(--c-y)*(100%/(150 - var(--c-y)))); 
    background-position:
      calc(-1*var(--c-left)*(var(--w,400px)/(300 - var(--c-x)))) 
      calc(-1*var(--c-top) *(var(--h,200px)/(150 - var(--c-y)))) ;
}

<div class="image"></div>
<div class="image" style="--w:200px;--h:100px;"></div>
<div class="image" style="--w:150px;--h:150px;"></div>