响应式CSS文本框架装饰

Question

我正在尝试创建一个位于两个 div 内的段落，并且每侧都有一个装饰。我可以让它与绝对像素值一起工作，但尝试使其响应相对（百分比）值对我来说不起作用。它应该看起来像这样：

我试图将一个带有填充的绿色 div 作为背景，一个白色 div，其中段落元素将在其中，并且在左右相同的图片之间旋转。我使用 .green-frame 作为相对容器来绝对定位装饰。我想把装饰固定在白色 div 的一侧。

根据我的理解，它应该与 top: 50% 和 left/right: ~10% 配合使用，将图像定位在中间，将图像定位在白色 div 下方的 ~10% 。但在实践中，它的工作原理与我的预期完全不同。要将图像定位在中间，需要 20%-25%，左/右为 0。当我更改屏幕尺寸时，图像会在白色 div 下方或上方移动更多。我试图把它粘在一边。

我尝试使用粘性和::before和::after与div的背景图像，我在显示我的代码的地方做了一个小提琴。不知何故，我必须翻转元素中的正确图像，因为将其放入 .right-deco 会将图像放在顶部。我怎样才能让装饰元素保持在中间并始终位于 .text-frame 下面的一小部分？

.green-frame {
  position: relative;
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
  background-color: #228B22;
  z-index: 0;
}

.text-frame {
  position: relative;
  background-color: #FFF;
  width: 90%;
  margin: 0 auto;
  z-index: 2;
}

.left-deco {
  position: absolute;
  left: 0;
  top: 20%;
  z-index: 1;

}

.right-deco {
  position: absolute;
  right: 0;
  top: 20%;
  z-index: 1;


}

p {
  padding: 1rem;
}

<div class="green-frame">

  <div class="left-deco">
    <img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="left-deco">
  </div>

  <div class="text-frame">

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  </div>

  <div class="right-deco">
    <img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="right-deco" style="transform: scalex(-1);">
  </div>

</div>

Answer 1

您可以使用 object-fit 和最终的 object-position 并使每个 img 为容器高度的 100%，宽度约为 120px。

看看 https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

以下代码片段中的想法：

.green-frame {
  position: relative;
  padding: 1rem;
  margin: 0 auto;
  background-color: #228b22;
  z-index: 0;
}

.text-frame {
  position: relative;
  background-color: #fff;
  margin: 0 60px;
  z-index: 2;
}

.left-deco {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 120px;
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

.right-deco {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 120px;
  object-fit: contain;
  z-index: 1;
}

p {
  padding: 1rem;
}

<div class="green-frame">

  <div class="left-deco">
    <img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="left-deco">
  </div>

  <div class="text-frame">

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

  </div>

  <div class="right-deco">
    <img src="https://cdn-icons-png.flaticon.com/128/4380/4380600.png" alt="decoration" class="right-deco" style="transform: scalex(-1);">
  </div>

</div>