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的否定来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？

1 个答案:

更新