封面适合倾斜div的内部图像[重复]答案

【问题标题】：cover fit the inner image of slant div [duplicate]封面适合倾斜div的内部图像[重复]
【发布时间】：2018-04-17 15:43:33
【问题描述】：

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

还有其他方法吗？

* {
  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);
}

<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>

【问题讨论】：

恕我直言，最简单和最快的方法就是扩展它，例如scale(1.25).
另一个副本：stackoverflow.com/questions/49289529/…

标签： html css css-transforms

【解决方案1】：

您可以尝试使用 transform: scale() 属性使图像比其原始尺寸大一点。试试这个代码。

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

【讨论】：

【解决方案2】：

您也可以使用剪辑路径来屏蔽图像。

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

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

浏览器支持对 IE 来说是个问题。

您需要在 <a> 上设置负边距（或类似的东西）以使元素像草图中一样对齐。

【讨论】：