Html 封面适合倾斜div的内部图像

我需要创建一个坡度/角度元素，所以我尝试了

skew（）

transform。在这个元素中，我有一个图像，我想覆盖父元素的整个区域，但是当我将

skew（）

应用到图像以使其笔直时，图像没有完全覆盖。我知道我可以使用

scale（）

transform来覆盖图像，但这会模糊我的图像。我要找的是下图

还有别的办法吗

*{
框大小：边框框；
保证金：0；
}
.集装箱{
显示器：flex；
溢出：隐藏；
柔性包装：包装；
利润率：0-30px；
}
.货柜a{
边框：3倍实心；
变换：倾斜（-30度）；
宽度：20%；
溢出：隐藏；
}
.集装箱img{
最大宽度：100%；
显示：块；
变换：倾斜（30度）；
}

---

您可以尝试使用transform:scale（）属性使图像比原始大小稍微大一点。试试这个代码

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

---

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

剪辑路径生成器：

犬类：

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

---

您需要在

上设置负边距（或类似的边距），以使元素与草图中的元素对齐。

IMHO最简单、最快速的方法就是缩放它，例如

缩放（1.25）

。另一个副本：