如何在不变换内部图像的情况下变换此 div？

Question

我尝试使用 div 制作一个形状并在里面放一张图片。我希望图像保持其默认形状（矩形或正方形）而不倾斜，但是当我将图像放入其中时，图像会随着 div 倾斜。对于 div 形状，我使用 transform: skewY(-10deg);

.intro {
  width: 180px;
  height: 400px;
  /* border-radius:50%;*/
  cursor: pointer;
  position: relative;
  background: #fff;
  transform: skewY(-10deg);
  margin: 35px 35px 35px 0px;
}
.intro img {
  width: 100%;
  height: 100%;
}

<div class="intro">
  <img src="http://lorempixel.com/180/400/sports">
</div>

Answer 1

您正在尝试完成此任务：扭曲外部对象的形状但保持内部形状不变。唯一的方法是 transform 内部形状 negative 外部形状 transform （也就是，如果你的 skewY(10deg) 在外部形状，在内部做 skewY(-10deg)），然后隐藏 overflow.

查看此片段：

.intro {
    width: 180px;
    height: 400px;
    cursor: pointer;
    position: relative;
    background: #fff;
    /* I added the -webkit- prefix as I'm using Safari 8 and
     * it wouldn't show up otherwise. Might want to prefix that! */
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
    margin: 35px 35px 35px 0px;
    overflow: hidden;
}
.intro img {
    width: 100%;
    height: 100%;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}

<div class="intro">
  <img src="http://lorempixel.com/180/400/sports">
</div>

这样做的一个令人讨厌的副作用是您的内容似乎被切断了。解决这个问题的唯一方法是使内部形状大于外部形状，从而有可能填充内部。对于您的图片，我建议：

.intro { 
    position: relative;
}
.intro img {
    /* Use min width and heights higher than 100% 
     * (you might need to experiment here as it depends
     *  on the angle you chose for your skew) to fill
     *  the outer shape completely. */
    min-width: 110%;
    min-height: 110%;
    /* Position the element absolute and 50%
     * from the top and left */
    position: absolute;
    left: 50%;
    top: 50%;
    /* Now add a transform to it to move it with 
     * half of its width and height, therefore centering it. */
    -webkit-transform: skewY(10deg) translate(-50%, -50%);
    transform: skewY(10deg) translate(-50%, -50%);
}

现在您也可以执行 width: 110%; height: 110%; left: -5%; top: -5%;，它会达到类似的结果。玩转它。

更新

根据@vals 的建议，仅使用 scale 转换而不是所有的定位 mumbo jumbo 可能会更简单。它始终是最容易被忽视的最简单的解决方案：

.intro img {
    -webkit-transform: skewY(10deg) scale(1.2, 1.2);
    transform: skewY(10deg) scale(1.2, 1.2);
}

如何在不变换内部图像的情况下变换此 div？

How can I transform this div without transforming the image within?

css

css-transforms

更新