縮放菱形

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像素。