1

Can someone help me with this: I was able to add SVG with filled image but the aspect ratio/scaling doesn't work as expected. I tried a few solutions but neither of them worked. Please help. The link is below: https://park-maksimir.hr/testnasve/

actual result

fdglefevre
  • 672
  • 4
  • 15
giga_games
  • 11
  • 2

1 Answers1

0
enter code here<style>
.aspectRatioSizer {
  display: grid;
}
.aspectRatioSizer > * {
  grid-area: 1 / 1 / 2 / 2;
}
</style>

<div class="aspectRatioSizer">
  <svg viewBox="0 0 7 2"></svg>
  <div>
    Content goes here
  </div>
</div>

Two things going on there:

  • As soon as you give a a viewBox, it goes full-width, but only as tall as the implied aspect ratio in the viewBox value. The viewBox value is essentially “top, left, width, height” for the coordinate system interally to the SVG, but it has the side-effect of sizing the element itself when it has no height of its own. That’s what is used to “push” the parent element into an apsect ratio as well. The parent will still stretch if it has to (e.g. more content than fits), which is good.
  • CSS Grid is used to place both elements on top of each other, and the source order keeps the content on top.
Vinamr Bajaj
  • 11
  • 1
  • Hi Vinamir, the aspect ratio works great now and the width works perfectly. The only thing I noticed though is a slight blur of the image (it's not as sharp as the image above). Thank you. You saved my day :) – giga_games Apr 26 '21 at 08:25