Question

我有一个div已旋转45度，这会形成菱形。在里面，我有另一个div，其旋转为零度为45度，因此内容为正方形我将内部容器设置为100% width & height，但由于旋转，它不会填充所有空间。

我知道我得到的输出对于我写的代码是准确的，因为它是100％的旋转，所以我想我需要它大于100％并随着浏览器的缩放而缩放。

＆＃13;

.headerImg {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 50%;
  display: block;
  background: #eee;
  height: 95vh;
  overflow: hidden;
  transform: rotate(45deg);
}

.rotateBack {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

＆＃13;

<div class="headerImg">
  <div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">

  </div>
</div>

＆＃13;

示例JSFiddle

Answer 1

由于容器div具有固定的大小，您可以使用图像的绝对位置，并通过在顶部/左侧/底部/右侧指定负值使其溢出;

＆＃13;

.headerImg {
  width: 50%;
  margin: auto;
  display: block;
  background: #eee;
  height: 95vh;
  overflow: hidden;
  transform: rotate(45deg);
  position: relative;
}

.rotateBack {
  position: absolute;
  top: -30%;
  left: -30%;
  bottom: -30%;
  right: -30%;
  transform: rotate(-45deg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

＆＃13;

<div class="headerImg">
  <div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">

  </div>
</div>

＆＃13;

顺便说一句，这是使用clip-path实现所需内容的另一种方法：

＆＃13;

body {
  margin: 0;
}

.rotateBack {
  height: 100vh;
  width: 50%;
  margin: auto;
  clip-path: polygon(50% 0, 0 50%, 50% 100%, 100% 50%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

＆＃13;

<div class="rotateBack" style="background-image: url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg')">

</div>

＆＃13;

或使用线性渐变（但背景不能透明）：

＆＃13;

body {
  margin: 0;
}

.back {
  height: 100vh;
  width: 50%;
  margin: auto;
  background:
  linear-gradient(45deg, #fff 25%, transparent 20%, transparent 75%, #fff 70%), 
  linear-gradient(-45deg, #fff 25%, transparent 20%, transparent 75%, #fff 20%), 
  url('https://www.rd.com/wp-content/uploads/2017/06/05-dog-breed-Safety-Tips-to-Keep-Your-Dog-in-Top-Shape-This-Summer-508549561-Yevgen-Romanenko.jpg') center/cover no-repeat;
}

＆＃13;

<div class="back">

</div>

＆＃13;

Answer 2

HTML

<div class="part">
<div class="losange">
  <div class="los1">
    <img src="http://farm3.staticflickr.com/2178/3531465579_8bff044e9b_z.jpg?zz=1" alt="" width="255" height="320" />
  </div>
</div>

CSS

.losange, .losange div {
 margin: 0 auto;
 transform-origin: 50% 50%;
 overflow: hidden;
 width: 250px;
  height: 250px;
}
.losange {
 transform: rotate(45deg) translateY(10px);
 }
 .losange .los1 {
  width: 355px;
  height: 355px;
  transform: rotate(-45deg) translateY(-74px);
  }
  .losange .los1 img {
    width: 100%;
    height: auto;
  }

我发现了这个，并用于我的一个项目。希望它能帮到你，理解主要想法。

旋转时使背景图像填满所有空间

2 个答案: