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>