Forums

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

Home › Forums › CSS › How to stop SVG images in safari not keeping their width

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • April 16, 2016 at 12:24 pm #240641
    Historical Forums User
    Participant

    Hi guys,

    If you see my site here: http://en.papayapods.com under the ‘Welcome to PapayaPods!’ title you will see six content blocks each with an SVG icon in an image tag. In chrome and firefox their widths are fine, yet in safari they seem to adopt a 100% width even though the icon isn’t that wide, pushing the text too far left. Giving the image a fixed width fixes this, but I want them responsive and to use the max-height I’ve used. Do you guys have a solution to propose?

    Many thanks

    April 16, 2016 at 4:05 pm #240645
    Atelierbram
    Participant

    Only thing I can think of is the padding-bottom hack for SVG as an image; see a demo here ; but this does require some extra HTML-markup, and changing the padding-bottom for each image according to the width/height proportions of the image.

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