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

时间:2018-03-05 20:35:23

标签: html css flexbox

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

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

1 个答案:

答案 0 :(得分:0)