Как я могу скретчить изображение с HTML и 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;
}

И изображение заполняется до <div>, и я хочу, чтобы оно было скретч.
Я пытался поиграть с повторением и позицией размера фона, но безрезультатно.

Вот чего я хочу достичь:

И вот что я на самом деле получаю:

Я используя то же изображение.

Answer 1

Эй, братан! Попробуйте НЕ обернуть ваш <img> тег между <div> тегами. Если вы установите class / id в теге, то вы можете вызвать этот класс или id в файле CSS и изменить его в своем wi sh (установить путь клипа и все эти вещи) следующим образом:

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

Таким образом, изображение будет вести себя не как div-банк, а как само изображение.

Удачи!

Answer 2

Вы можете установить max-height в указанных c пикселях и установить max-width как 100% тега img.

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