Insert image into HTML to be height-cropped - html

Question

I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.

Answer 1

You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>

Answer 2

Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}

Answer 3

Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>

Answer 4

You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.