Hey fellow stackoverflow users!
I've created a geometric figure using multiple divs for an unconventional website design. However, I'm struggling to adapt images within these divs because the original width is not being maintained. When you view this in a test HTML file, you'll see how it impacts the appearance. Can anyone help me out with this issue? Here's the code snippet:
<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 styling for this section is as follows:
#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;
}
I am aiming to create a slider effect with these three images, hence the need for proper image adaptation.