The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › using the picture element
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?
A codepen demo of the issue would be useful but as far as I know picture woudl just require text-align:center.
thanks, text-align solves the centering issue!
Regarding the %80 width, I am still trying.
Here you are the pen
Curiously enough, the width of the source elements can be driven by the width of the img fallback.
Other methods (sizes = “100vw”) seem not to work for me.