html中图形和图像,如何将图像调整为html和css中的几何图形？

你好stackoverflow的朋友。

我是在多个div中制作了一个几何图形，因为我做了一个疯狂的网站，但我不知道如何将图像调整到这些div中因为我的图像没有采用原始宽度而你在一个测试html文件中看看这是怎么回事损坏外观请帮帮我。这是这里的代码。

css文件是：

#slider-container{

margin: 0;

padding: 0;

width: 350vw;

display: block;

min-width: 1200px;

margin-left: -3em;

}

#container-child{

width: 110vw;

margin-left: -5rem;

}

.css-shapes-preview{

position: relative;

width: 33.33%;

padding: 0px;

transform: translateX(-60px) rotate(0deg) skew(350deg);

-webkit-transform: translateX(-60px) rotate(0deg) skew(350deg);

float: left;

}

.slider-imgs-parttern{

width: 50%;

}

.image-slider{

height: 70vh;

min-width: 500px;

}

原因是因为我想用三个图像做一个滑块。