How can I skretch an image with HTML and CSS?

Question

<div id="background">
  <img title="Imagen Corporativa" alt="Imagen Corporativa" src= "C:\Users\aleja\Desktop\A. Programacion\Factoria F5\Primer Sprint - Landing Page\Background.jpg"/>
</div> 

#background {
  background-size: cover;
  position: fixed;
  margin-left: 45%;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 10% 100%);
  background-image: ("Background.jpg");
  grid-column:2;
  background-size: cover;
}

And the image get filled into the <div> , and I want it to skretch.
I tried playing with background-size repeat and position, but had no results.

This is what I want to achieve:

And this is what i actually get:

I am using the same image.

Answer 1

You can set max-height in specific pixels and set max-width as 100% of the img tag.

max-height: 90px;
max-width: 100%;

Answer 2

Heey bro! Try to NOT wrap your <img> tag between <div> tags. If you set a class/id in the tag, then you can call this class or id in the CSS file and modify it at your wish (set the clip-path and all this stuff) like that:

.background-image {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
    grid-column: 2/2;
    background-size: contain;
    width: 100%
}

That way, the image will not behave as a div banckground but as an image itself.

Good luck!