SVG 裁剪背景缩放 - 如何保持纵横比？

Question

列组件的背景应随容器缩放并保持纵横比 = 始终保持完美的圆形，就像剪切路径形状一样。我希望以后的剪切路径具有更复杂的形状，但出于演示目的，我使用了圆圈。

现在是这样的：

应该是这样的：

如何使形状始终保持正确的纵横比并随列缩放？

body {
  background-image: url("https://i.imgur.com/M6tL2a8.png");
    background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  color: #fff;
}

.row {
  width: 100%;
  min-height: 300px;
}

.column {
  width: 40%;
  height: 100%;
  min-height: 300px;
  display: inline-block;
  border: 1px dashed #555;
}

.bubble_container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.bubble_container p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}

.bubble_background {
  position: relative;
  display: block;
  min-width:100%;
  min-height: auto;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0.2) 0%,rgba(0,0,0,0) 100%), url("https://i.imgur.com/M6tL2a8.png");
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  -webkit-clip-path: url(#clip_circle);
  clip-path: url(#clip_circle);
  filter: blur(3px);
  text-align: center;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" height="0">
  <defs>
    <clipPath id="clip_circle" clipPathUnits="objectBoundingBox">
      <circle cx="1" cy="1" r="1" id="circle" transform="scale(0.5 0.5)"/>
    </clipPath>
  </defs>
</svg>

<div class="row">
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background">&nbsp;</div>
          <p>Column#1</p>
    </div>
  </div>
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background">&nbsp;</div>
          <p>Column#1</p>
    </div>
</div>

</div>

Answer 1

我参考了下面的 SO Answer 并应用它来获得解决方案。

SO Answer

如果我们想要宽度和高度相同。我们只需要将宽度设置为百分比或值，并将 padding-top 设置为相同的值。

body {
  background-image: url("https://i.imgur.com/M6tL2a8.png");
    background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  color: #fff;
}

.row {
  width: 100%;
  min-height: 300px;
}

.column {
  width: 40%;
  height: 100%;
  min-height: 300px;
  display: inline-block;
  border: 1px dashed #555;
}

.bubble_container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.bubble_container p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;
}

.bubble_background {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0.2) 0%,rgba(0,0,0,0) 100%), url("https://i.imgur.com/M6tL2a8.png");
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  -webkit-clip-path: url(#clip_circle);
  clip-path: url(#clip_circle);
  filter: blur(3px);
  text-align: center;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" height="0">
  <defs>
    <clipPath id="clip_circle" clipPathUnits="objectBoundingBox">
      <circle cx="1" cy="1" r="1" id="circle" transform="scale(0.5 0.5)"/>
    </clipPath>
  </defs>
</svg>

<div class="row">
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background"></div>
          <p>Column#1</p>
    </div>
  </div>
  <div class="column">
    <div class="bubble_container">
      <div class="bubble_background"></div>
          <p>Column#1</p>
    </div>
</div>

</div>

SVG 裁剪背景缩放 - 如何保持纵横比？

SVG clipped background scaling - how to preserve the aspect ratio?

html

css

svg

background-image

clip-path