Scaling a diamond shape - html

Question

I’m making a diamond shape for a user’s image with the help of this CodePen demo.
But when I change the width and height according to my content the shape will disturb: see my JSFiddle Demo.
In the selector .losange, .losange div the original values for width and height are both 250px and in .losange .los1 they’re both 355px.
Here is my code:
.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

You need to calculate right translate values:
.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:
Changed sizes - now Losange width is 130 pixels.