CODEWITHSUNDEEP
htmlcsssvgbackground-imageclip-path
Hexodus
Hexodus

Reputation: 12927

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

Background of the column components should scale with the containers an preserve the aspect ratio = stay always perfect circular like the clipping path shape is. I want later the clipping path to be of a more sophisticated shape but for demonstration purposes I use the circle.

This is how it looks now:

enter image description here

This is how it should be:

enter image description here

How to make the shape to stay always in the right aspect ratio and also scaling with the columns? 

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>

Upvotes: 1

Views: 1225

Answers (1)

Naren Murali
Naren Murali

Reputation: 56670

I referred to the below SO Answer and applied it to get the solution.

SO Answer

If we want the same width as height. We just need to set the width to a percentage or value and also the padding-top to the same value.

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>

Upvotes: 1

Related Questions