title: while display image crop Top and Bottom of image using css
body: <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>