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回答や解決策を得るためにそれを適用以下に言及しました。

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>