将背景图像放置在菱形容器中会导致容器失去形状 [英] placing background image in a rhombus shaped container is causing the container to lose its shape

问题描述

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

The title sums it up pretty much, I can get the rhombus drawn easily enough but when I add an image to the background it adds more sides to the shape. I can't seem to figure out why this is happening when the background image is added. Any advice would be appreciated

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

Here is the code I have, excuse the inline css I am only doing it like this until I have a working solution then I will transfer the css into the external css file.

可以在此处找到演示

 <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>

推荐答案

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

You need to increase the width/height of the image and you may consider flexbox to easily center it. It then overflow equally from the 4 sides and it will cover the gap:

.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，并且只对框和图像都应用了旋转):

To be more precise and accurate it's exactly sqrt(2) * 100% ~ 141%. Here is an illustration to better understand (I removed the border-radiusand applied only rotation to both box and image):

绿线是我们要计算的宽度(或高度，因为我们有一个正方形)，红线是盒子的宽度/高度， Pythagore说公式是W² = h² + w²和h = w，所以我们有W = sqrt(2) * h.

The green line is the width we want to caclulate (or the height since we have a square) and the red lines are the width/height of the box and Pythagore said that the formula is W² = h² + w² and h = w so we have W = sqrt(2) * h.

如果您想更加准确，我们还可以减少border-radius创建的空间.考虑到半径的工作原理，我们可以绘制此图:

If you want to be more accurate we can also reduce the space created by border-radius. Considering how radius works we can draw this illustration:

红线定义border-radius的值(在这种情况下为20px).绿线等于sqrt(2)*20px [使用先前的公式]，而我们需要删除的距离(由橙色线定义)只是sqrt(2)*20px - 20px ~ 0.41 * 20px ~ 8.28px.所以最终的代码可能是:

The red lines define the value of border-radius (20px in this case). The green line is equal to sqrt(2)*20px [using the previous formula] and the distance we need to remove (defined by the orange line) is simply sqrt(2)*20px - 20px ~ 0.41 * 20px ~ 8.28px. So the final code could be:

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

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

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

这篇关于将背景图像放置在菱形容器中会导致容器失去形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！