如何使圖像適應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/