如何使图像适应html和CSS中的几何图形？

Question

您好stackoverflow的朋友。

我是在许多div中制作了一个几何图形，因为我做了一个疯狂的网站，但是我不知道如何将图像适应这些div，因为我的图像没有采用原始宽度，因此您在测试html文件中查看了损坏外观请帮帮我。 这是这里的代码。

<div id="slider-container">
    <div id="container-child">
        <div class="css-shapes-preview" id="first-interfell-slide" /*style="background-image: url(images/_web-slider_back01.jpg); height: 75vh;"*/ >

            <img class="image-slider" src="images/_web-slider_back01.jpg" alt="first-main--slider-1">
        </div>
        <div class="css-shapes-preview" id="second--slide" /*style="background-image: url(images/_web-slider_back02.jpg); height: 75vh;"*/ >
            <img class="image-slider" src="images/_web-slider_back02.jpg" alt="first-main--slider-2">
        </div>
        <div class="css-shapes-preview" id="third--slide" /*style="background-image: url(images/_web-slider_back03.jpg); height: 75vh;"* >
            <img class="image-slider" src="images/_web-slider_back03.jpg" alt="first-main--slider-3">
        </div>
    </div>
</div>

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;
}

原因是因为我想对这三个图像进行滑动。

Answer 1

答案在这两页中：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

和

http://bennettfeely.com/clippy/