Hello stackoverflow friends.
My is I made a geometric figure in many divs because am do a crazy website but i don't know how adapt the image into those divs because my image doesn't take the original width and you look at in a test html file how this damage the appearance please help me. This is the code here.
<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>
the css file is:
#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;
}
The reason is because i want to do a slider with the three images.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.