The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Wrap Responsive SVG Around Responsive Image using CSS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #209409

    In order to overlay custom shapes over an image, I need to wrap an SVG layer around a responsive image such that the SVG view box automatically adjusts it’s dimensions based on the image itself. If I adjust the image container max width, the image and svg should automatically adjust according to it’s new parent size without the need for JS. Even though this can be done with Javascript (by setting the SVG to the image size programatically), it’s messy. I’d rather have the SVG automatically adjust based on pure CSS rules.

    I think I’ve got this right, however, I need the same CSS mechanism to work cross browser (IE10+, Latest Google Chrome, Firefox, Safari and Mobile Safari).

    Note that in the demo code below the actual image (embedded as base 64) is 600×800 but in a container with a max width of 200px, it becomes sized accordingly.

    Am I missing something in this solution, is this the “Right” way to do this? I spend a little over 15 minutes figuring this out, and since it needs to go into production, I want to make sure i’ve figured this out correctly. This seems to work in Chrome and Safari but NOT in IE or Firefox.



    Any help on this guys?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.