Is there a way to use CSS to display only a specific part of an image based on its width and height? If not possible with CSS alone, would TypeScript be a solution?
For example, if I have an image that is 2,434px × 1,697px inside a div that is 700x700, how can I show only a particular portion, such as the upper part of the image?
.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>
The code currently only displays the upper left part of the image, but I need to show the entire upper section of the image, similar to the image linked below: needed image