在CSS中为图像倾斜容器

Question

所以我想制作一系列倾斜容器内的图像。请参阅图片以完全理解：

到目前为止，我所获得的最好的是将容器围绕图像倾斜，但是有两个问题：内部图像变得歪斜，最左边和最右边都有间隙。

HTML：

       m <- array(1:30, c(5,4,3))
       mp <- apply(m,1:2,quantile,probs=c(.95),na.rm=TRUE) 
       temp      <- array(dim=dim(m))

       for(i in 1:5){
         for(j in 1:4){
            temp[i,j,] <- m[i,j,]>mp[i,j]
         }
       }

到目前为止我所拥有的：

CSS：

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>

http://codepen.io/mildrenben/pen/oXjzrK

Answer 1

有一种方法可以很好地完成clip-path，但问题是目前还没有得到很好的支持。请参阅here了解详情，详细了解clip-path here。

以下是一个例子：

＆＃13;

＆＃13;

html, body {
  width: 100%;
}

section {
  display: flex;
  height: 250px;
  overflow: hidden;
}

.image-wrap {
  width: 30%;
  height: 100px;
  -webkit-clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
  clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0 100%);
  margin-left: -3%;

}
.image-wrap:last-child {
   -webkit-clip-path: none;
  clip-path: none;
}
img {
  width: 100%;
  height: 140px;
}

＆＃13;

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一种可能的解决方案（但不是真的非常优雅）是将父容器向一个方向倾斜，然后将子容器向相反方向倾斜。同时，如果您可以将这些图像设置为bg图像会更好，因为您可以更好地控制背景大小。

这种方法的缩小范围是：

• 将背景图像设置为内联样式（如果它们是动态的）;
• 您需要计算将子图像拉到左/右所需的确切百分比，这样您就可以填充由偏斜变换角度创建的整个空间（我将其设置为5％，仅用于演示目的）

总而言之，如果您可以将其集成到您的应用中，则可以选择。

html,
body {
  width: 100%;
}

section {
  display: flex;
  height: 250px;
  overflow: hidden;
}

.image-wrap {
  border: 1px solid blue;
  width: 20%;
  height: 120px;
  transform: skew(-5deg);
  overflow: hidden;
  position: relative;
  backface-visibility: hidden;
}

.image-wrap img,
.image-wrap .thumb {
  transform: skew(5deg);
  position: absolute;
  right: -5%;
  left: -5%;
  top: 0;
  bottom: 0;
}

<section>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg') no-repeat transparent;"></div>
  </div>
  <div class="image-wrap">
    <div class="thumb" style="background: url('http://i.imgur.com/pHCV0Vt.jpg') no-repeat transparent;"></div>
  </div>
</section>

我知道这不是最干净的解决方案，但这就是我现在提出来的。

Answer 3

根据你的例子你可以做到这样的事情。只需使用.image-wrap高度来实现图像与包装之间的完美平衡：）

＆＃13;

＆＃13;

*{
  margin: 0;
}
html, body {
  width: 100%;
}

section {
  display: flex;
  height: 250px;
  overflow: hidden;
}
.image-wrap {
  width: 20%;
  height: 250px;
  -webkit-transform: skew(-5deg);
  -ms-transform: skew(-5deg);
  transform: skew(-5deg);
  overflow: hidden;
}
.image-wrap img {
  width: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: skew(5deg);
  -ms-transform: skew(5deg);
  transform: skew(5deg);
}

＆＃13;

<section>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://screenshots.en.sftcdn.net/en/scrn/90000/90064/league-of-legends-35.jpg">
  </div>
  <div class="image-wrap">
    <img src="http://i.imgur.com/pHCV0Vt.jpg">
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;