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

如果我们想的一样宽度的高度。我们只需要将宽度设置为百分比或值，并将填充顶部设置为相同的值。

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>