Html 如何防止我的图像失真？

我从条纹设计中获得灵感（我的图片是前1名）。我希望图像定位在屏幕底部。我的问题是，当您更改浏览器的大小时，它会导致菱形（深棕色和白色）变形

我的代码：

<main>
    <div class="introduction w-100 h-100">
      <div class="third">
        
      </div>
    </div>
  </main>

---

我正在使用bootstrap，有人有什么建议吗？

你能在课堂上三次展示该结构的其余部分吗？我认为将图像直接集成到

img

元素中会更容易

.introduction {
    background-color: #F4F4F4;
}

.third {
    position: absolute;
    bottom: 0;
    background: url("bottom-third2.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 25%;
   
}