缩放菱形

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

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

.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; 
 
}

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

UPDATE：
更改大小 - 现在Losange宽度130像素。