Question

在CodePen demo的帮助下，我正在为用户的图像制作钻石形状。

但是当我根据我的内容更改width和height时，形状会受到干扰：请参阅my JSFiddle Demo。

在选择器.losange, .losange div中，width和height的原始值均为250px，而.losange .los1中的原始值均为355px。

这是我的代码：

.losange, .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 130px; /* originally 250px */
  height: 130px; /* originally 250px */
}

.losange {
  transform: rotate(45deg) translateY(10px);
}

.losange .los1 {
  width: 130px; /* originally 355px */
  height: 130px; /* originally 355px */
  transform: rotate(-45deg) translateY(-74px);
}

.losange .los1 img {
  width: 100%;
  height: auto;
}

Answer 1

您需要计算正确的翻译值：

＆＃13;

.losange, .losange div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    width: 92px;
    height: 92px;
}
.losange {
    transform: rotate(45deg) translateY(10px) translateX(10px);
}
.losange .los1 {
  width: 130px;
  height: 130px;
  transform: rotate(-45deg) translateY(-27px);
}
.losange .los1 img {
    width: 100%;
    height: auto;
}

＆＃13;

<div class="losange">
    <div class="los1">
        <img src="http://photos-d.ak.instagram.com/hphotos-ak-xpa1/10483342_1471091656483347_532843009_n.jpg" />
    </div>
</div>

＆＃13;

<强>更新
更改尺寸 - 现在洛杉矶宽度为130像素。

缩放钻石形状

1 个答案: