while display image crop Top and Bottom of image using css
<p>I am trying to display images from a youtube for videos the display content size</p>

<pre><code>height:180px
width :270px
</code></pre>

<p>From youtube images are coming with some black spece on the top and bottom</p>

<p>ex:</p>

<p><a href="https://i.stack.imgur.com/8VKUT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8VKUT.jpg" alt="enter image description here"></a></p>

<p>i like to display images like this </p>

<p><a href="https://i.stack.imgur.com/Oyv6s.png]" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oyv6s.png]" alt="enter image description here"></a></p>

<p>searched for answer on the internet</p>

<p>found these links are helpful but no solution for how i want to display the image </p>

<p><a href="https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image?lq=1">How to automatically crop and center an image</a></p>

<p>This one most helpful but i can't use background-image tag. i want it in  tag</p>

<p><a href="https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped">CSS Display an Image Resized and Cropped</a></p>

<p>Anyone help me solve this..Thank you</p>