CODEWITHSUNDEEP
htmlcsssvg
Huy Nguyen
Huy Nguyen

Reputation: 53

How to fit my SVG Image to the Parent wrapper div?

I have the following code snippet that I am working with. I could not get my SVG image fit my container div.

.img {
    margin: 0; 
    padding: 0; 
    overflow: hidden
    width: 500px;
    position: relative;
}

img {
    top:0;
    left:0;
    height:500px;
    width:100%;
}
<div class="img">
  <img src="https://svgur.com/i/SPb.svg" alt="An svg image">
</div>

My Codepen: https://codepen.io/huyct1996/pen/zYKwXjM

Any help would be highly regarded. Thank you

Upvotes: 2

Views: 3359

Answers (3)

igrek
igrek

Reputation: 1425

Update your svg file, so that text inside of it is centered, rather then translated.

<svg width="100%" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="100%" height="1" fill="#ECEEF4" />
    <rect y="112" width="100%" height="1" fill="#ECEEF4" />
    <rect y="336" width="100%" height="1" fill="#ECEEF4" />
    <rect y="56" width="100%" height="1" fill="#ECEEF4" />
    <rect y="280" width="100%" height="1" fill="#ECEEF4" />
    <rect y="224" width="100%" height="1" fill="#ECEEF4" />
    <rect y="168" width="100%" height="1" fill="#ECEEF4" />
    <rect y="392" width="100%" height="1" fill="#ECEEF4" />
    <text fill="#8B90A0" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Drop it here or add a file</text>
</svg>

It will not expand vertically. Y attributes are numbers not percentages

Upvotes: 1

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

Your Problem is solved with object-fit:contain: Try below code:

UPDATE: SVG itself has some issues, so I directly put the SVG in HTML to show you the right way of doing it:

 .img-wrapper {
        height: 500px;
        width: 500px;
      }

      img {
        height: 100%;
        width: 100%;
        object-fit: contain;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="img-wrapper">
      <!-- <img
        src="https://raw.githubusercontent.com/huyct1996/images/3ddca45402fbc1ce4ee0f1a58f67a34f87f2d8aa/empty.svg"
        alt="An SVG Image"
      /> -->

      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
        fill="none"
      >
        <rect width="100%" height="1" fill="#ECEEF4" />
        <rect y="112" width="100%" height="1" fill="#ECEEF4" />
        <rect y="336" width="100%" height="1" fill="#ECEEF4" />
        <rect y="56" width="100%" height="1" fill="#ECEEF4" />
        <rect y="280" width="100%" height="1" fill="#ECEEF4" />
        <rect y="224" width="100%" height="1" fill="#ECEEF4" />
        <rect y="168" width="100%" height="1" fill="#ECEEF4" />
        <rect y="392" width="100%" height="1" fill="#ECEEF4" />
        <text
          fill="#8B90A0"
          x="50%"
          y="50%"
          dominant-baseline="middle"
          text-anchor="middle"
        >
          Drop it here or add a file
        </text>
      </svg>
    </div>
  </body>
</html>

Upvotes: 1

Rojo
Rojo

Reputation: 2869

Just use width:100%; height:100% in the CSS. It will force the SVG to take up all the space of the div.

<div class="img">
  <img style="width:100%; height: 100%;" src="img.svg" alt="image">
</div>

Upvotes: 1

Related Questions