将背景图像放置在菱形容器中会导致容器变形

Question

标题非常概括，我可以很容易地绘制菱形，但是当我在背景中添加图像时，它会为形状添加更多边。我似乎无法弄清楚为什么在添加背景图像时会发生这种情况。任何建议将不胜感激

这是我的代码，请问内联css，我只是这样做，直到找到有效的解决方案，然后我才将css传输到外部css文件中。

A demo can be found here

 <div class="row">
<div class="col-sm-4" >
<div style=" margin:50px auto;
 width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg);">

<img src="images/stripsResize.jpg" alt="Chicken Strips" style="transform: 
 rotate(-45deg);
 -ms-transform: rotate(-45deg); 
 -webkit-transform: rotate(-45deg); 
  top:-100px;
  left:-100px;">
 </div>
</div>

<div class="col-sm-4">
<div style="width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); 
 -webkit-transform: rotate(45deg); 
 background-color: green;">
</div>
</div>
<div class="col-sm-4">
 <h1>Desert</h1>
</div>
</div>

Answer 1

您需要增加图像的宽度/高度，并且可以考虑使用flexbox轻松将其居中。然后，它从4个侧面均等地溢出，并且将填补空白：

.box {
  margin: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(45deg);
}

.box img {
  transform: rotate(-45deg);
  width: 141%;
  height: 141%;
  flex-shrink: 0;
}

<div class="box">
  <img src="https://picsum.photos/200/200?image=1069">
</div>

为什么精确到141％？

更准确地说，它就是sqrt(2) * 100% ~ 141%。这是一个更好理解的示例（我删除了border-radius，仅对方框和图像都应用了旋转）：

绿线是我们要计算的宽度（或高度，因为我们有一个正方形），红线是盒子的宽度/高度， Pythagore说公式为{ {1}}和W² = h² + w²，所以我们有h = w。

如果您想更加准确，我们也可以减少W = sqrt(2) * h创建的空间。考虑到radius works的绘制方式：

红线定义border-radius的值（在这种情况下为border-radius）。绿线等于20px [使用上一个公式]，我们需要删除的距离（由橙色线定义）仅为sqrt(2)*20px。所以最终的代码可能是：

sqrt(2)*20px - 20px ~ 0.41 * 20px ~ 8.28px

.box {
  margin: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 20px;
  overflow: hidden;
  transform: rotate(45deg);
}

.box img {
  transform: rotate(-45deg);
  width: calc(141% - 8.28px);
  height: calc(141% - 8.28px);
  flex-shrink: 0;
}

^{上面的公式仅适用于这种特殊且简单的情况。对于其他情况，计算可能会变得更加复杂}