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;
}
原因是因为我想用三张图片做一个滑块。
答案 0 :(得分:0)