[英]How adapt an image into a geometric figure in html and css?
Hello stackoverflow friends. 您好stackoverflow的朋友。
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. 我是在许多div中制作了一个几何图形,因为我做了一个疯狂的网站,但是我不知道如何将图像适应这些div,因为我的图像没有采用原始宽度,因此您在测试html文件中查看了损坏外观请帮帮我。 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: 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;
}
The reason is because i want to do a slider with the three images. 原因是因为我想对这三个图像进行滑动。
The answer is in this two pages: 答案在这两页中:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
and 和
http://bennettfeely.com/clippy/ http://bennettfeely.com/clippy/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.