Есть ли способ отобразить часть изображения в зависимости от размера, используя только CSS?

Question

Я хотел бы узнать, можно ли отображать только часть изображения в зависимости от ширины x высоты изображения, используя только CSS? (Если это невозможно только с CSS, то только с TypeScript)

Пример, если у меня есть изображение размером 2,434 × 1,697 пикселей внутри div размером около 700x700, как показать только определенную часть, как только вся верхняя часть изображения?

.image-container {
  height: 700px;
  width: 700px;
  border: 2px solid black;
  overflow: hidden;
}

<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg">
</div>

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

Answer 1

Здесь вам могут помочь

object-fit и object-position:

.image-container {
  height: 200px;
  width: 700px;
  border: 2px solid black;
  overflow: hidden;
}

img {
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:top;
}

<div class="image-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg">
</div>