SVG abgeschnitten Hintergrundskalierung - wie das Seitenverhältnis beibehalten?

Question

Hintergrund der Spaltenkomponenten sollte mit den Containern skalieren und das Seitenverhältnis beibehalten = immer perfekt kreisförmig bleiben, wie die Clipping-Pfad-Form ist. Ich möchte später, dass der Beschneidungspfad eine ausgeklügeltere Form hat, aber zu Demonstrationszwecken benutze ich den Kreis.

Dies ist, wie es jetzt aussieht:

Dies ist, wie es sein sollte:

Wie die Form machen immer in der richtigen Seitenverhältnis zu bleiben und auch Skalierung mit den Spalten?

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

bezog ich mich auf der unten SO Antwort und wandte sie die Lösung zu erhalten.

SO Answer

Wenn wir die gleiche Breite wie Höhe wollen. Wir müssen nur die Breite auf einen Prozentsatz oder Wert und auch die Padding-Top auf den gleichen Wert setzen.

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>