Home/ Questions/Q 8973129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T18:22:40+00:00

Okay I’ve been banging my head against this one for a few hours, so

  • 0

Okay I’ve been banging my head against this one for a few hours, so now it’s time to throw it on here and see if anyone can help:

The basic problem is that I’ve got an SVG on an html page, that’s styled to be responsive, and adjust to the width of the browser window. The code works perfectly fine in both IE and Chrome, but on Firefox when the window gets smaller than a certain size, the SVG stops scaling. It will scale up fine. Just to infuriate me, it also appears that when I ‘inspect element’ in Firefox, and check out the code, the SVG resizes properly to fit into the now smaller viewing area. Here’s some screenshots of what I mean:

SVG working in Chrome

SVG not working in Firefox

SVG in Firefox 'Inspect Element' view

Here’s my code, as basic as it is:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Glynne McReynolds</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<header>
    <img src="images/glynne-mcreynolds.svg" alt="Glynne McReynolds" title="Glynne McReynolds">
</header>
</body>
</html>

And the relevant CSS:

header {
    max-width: 500px;
    text-align: center;
    margin: 0px auto;
}
header img {
    width: 100%;
    height: auto%;
}

I should note that I’ve also included the development build of modernizr.js, but removing it doesn’t make any difference, so I left it out.

Things I’ve tried:

  • Removing the width and height declarations from SVG.
  • Embedding the SVG as an object instead of in an img tag.

Also here’s a fiddle with the code, and here’s the SVG. Any help would be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your Firefox screenshot shows that the window is narrower than the browser UI will go (note the cut-off toolbar), so that the viewport is actually ending up wider than the window.

    As Robert mentions above, the inability of the UI to shrink past a certain point is often caused by add-ons that add non-flexible elements to the UI….

    • 0