Forums

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

Home Forums CSS using the picture element

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #207074
    amc
    Participant

    I am using the <picture><source srcset…. elements to display images (instead of the <img />)

    I am trying to figure out a couple of things:

    1) Horizontal centering;

    I am not successful in centering a <picture><source srcset = “file.jpg”…. (trying to assign display:block and margin:0 auto, as in the img element)

    2) Taking a certain width

    In the same field, forcing an image to take a certain width. I tried to assign width % to a [srcset], or using sizes = “80%” steadily unsuccessfully

    May I get some hints, please?

    #207077
    Paulie_D
    Member

    A codepen demo of the issue would be useful but as far as I know picture woudl just require text-align:center.

    #207083
    amc
    Participant

    thanks, text-align solves the centering issue!

    Regarding the %80 width, I am still trying.

    Here you are the pen

    http://codepen.io/anon/pen/eNqLyR

    #207239
    amc
    Participant

    Curiously enough, the width of the source elements can be driven by the width of the img fallback.

    http://codepen.io/i2c2/pen/KdPNxo

    Other methods (sizes = “100vw”) seem not to work for me.

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