封面适合倾斜div的内在形象

Question

我需要创建一个斜率/角度元素，所以我尝试了skew()变换。在这个元素中，我有一个图像，我想覆盖整个父元素区域，但是当我将skew()应用于图像使其成为笔直时，图像并未完全覆盖。我知道我可以使用scale()变换来覆盖图像，但这会模糊我的图像。我正在寻找的是图像下方。

有没有其他方法可以做到这一点？

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.container a {
  border: 3px solid;
  transform: skew(-30deg);
  width: 20%;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  display: block;
  transform: skew(30deg);
}

＆＃13;

<div class="container">
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试使用transform：scale（）属性使图像比原始大小更大。试试这段代码。

.container img {
  max-width: 100%;
  display: block;
  transform: skew(30deg), scale(1.2);
}

Answer 2

您还可以使用剪辑路径来遮罩图像。

剪辑路径生成器： https://bennettfeely.com/clippy/

Caniuse： https://caniuse.com/#search=clip-path

浏览器支持是IE的一个问题。

您需要在<a>上设置负边距（或类似内容），以使元素在草图中对齐。