Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
406 views
in Technique[技术] by (71.8m points)

html - Why don’t SVG images scale using the CSS “width” property?

I'm building a portfolio website.

HTML Code

<div id = "hero">
   <div id = "social">
      <img src = "facebook.svg">
      <img src = "linkedin.svg">
      <img src = "instagram.svg">
    </div>
</div>

CSS code (using SASS)

#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;

    #social {
        width: 50%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        img {
            width: 2em;
        }
    }
}

The problem is that I'm not able to resize SVGs using the CSS width property. Here is what I obtain in different cases:

img { width: 2em; }

enter image description here

img { width: 3em; }

enter image description here

img { width: em; }

enter image description here

Please note how icons collapse toward the middle of the hero div.

Instead, if I use the CSS height property:

img { height: 2em; }

enter image description here

img { height: 3em; }

enter image description here

img { height: 4em; }

enter image description here

This behaviour is what I need, but I'm not sure this is the right way. Why this happens? Do you know better ways of resizeing SVG images (especially using the flexbox model)?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

SVGs are different than bitmap images such as PNG etc. If an SVG has a viewBox - as yours appear to - then it will be scaled to fit it's defined viewport. It won't directly scale like a PNG would.

So increasing the width of the img won't make the icons any taller if the height is restricted. You'll just end up with the img horizontally centred in a wider box.

I believe your problem is that your SVGs have a fixed height defined in them. Open up the SVG files and make sure they either:

  1. have no width and height defined, or
  2. have width and height both set to "100%".

That should solve your problem. If it doesn't, post one of your SVGs into your question so we can see how it is defined.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...