Html 缩放菱形

我正在用这个工具为用户的图像制作一个菱形

但是当我根据我的内容更改

宽度

和

高度

时，形状将受到干扰：请参见

在选择器

.losange、.losange div

中，

width

和

height

的原始值都是

250px

，在

.losange.los1

中它们都是

355px

这是我的密码：

.losange、.losange div{
保证金：0自动；
变换原点：50%50%；
溢出：隐藏；
宽度：130px；/*最初为250px*/
高度：130px；/*最初为250px*/
}
洛桑格先生{
变换：旋转（45度）translateY（10像素）；
}
.losange.los1{
宽度：130px；/*355px*/
高度：130px；/*355px*/
变换：旋转（-45度）translateY（-74像素）；
}
.losange.los1img{
宽度：100%；
高度：自动；
}

您需要计算正确的转换值：

.losange、.losange div{
保证金：0自动；
变换原点：50%50%；
溢出：隐藏；
宽度：92px；
高度：92px；
}
洛桑格先生{
变换：旋转（45度）translateY（10px）translateX（10px）；
}
.losange.los1{
宽度：130px；
高度：130像素；
变换：旋转（-45度）translateY（-27px）；
}
.losange.los1img{
宽度：100%；
高度：自动；
}

请制作一个JSFIDLE或代码片段，用我的代码示例更新我的代码。您可以使用上面的链接。我正在更改.losange、.losange div和.losange.los1的宽度和高度。从原始示例中，我尝试更改值，但我没有看到任何图像旋转，甚至尝试调整浏览器宽度的大小，什么都没有发生……您看到了吗？？与此相比（这是原始示例）是的，我对“变换”和“平移”属性值是新的。在你的代码中，你为图像div设置了不同的高度和宽度，我想设置相同的高度和宽度（130）。你能告诉我如何计算转换值吗？如果你为

losange

和

los1

设置了相同的宽度，你将得到一个八角形。您需要为

los1

设置较大的宽度，以填充父元素并获得“Losange polygon”。如果需要“Losange”（从左角到右角）的某个宽度，则必须计算父元素的宽度：

width=√(130² / 2) ≈ 92

。所以如果你设置这个宽度，你会得到130像素的宽度。