0

This is a super cleaned version of some photos I need in a wall of text (padding and red for visualization aid).

<div style="background:red;width:300px;display:flex;flex-wrap:wrap;padding:1em;justify-content:space-between;">
  <picture>
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:100%;height:auto;padding-bottom:2%;">
  </picture>
  <picture>
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:49%;height:auto;">
  </picture>
  <picture>
    <source type="image/avif" srcset="xxx.avif">
    <img alt="xxx" src="xxx.jpg" style="width:49%;height:auto;">
  </picture>
</div>

Until I use three img (deleting all "picture" and "source" code) it works flawless, I can't solve, it's four hours I try, I'm going crazy. Thanks, I attach a screenshot next.

picture problem

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Marco M.
  • 21
  • 4
  • Can you please elaborate more like what's the main problem and what are you trying to achieve here? Because its pretty unclear what you are trying to do – first Sep 29 '22 at 19:52
  • In my website I have three photos every some lines of text (I need to achieve a thing like what you see in the left of the image attached). Everything's perfect. I decided to switch to avif compression so my img tag has become a picture tag with a src and an srcset. In the same moment I started using picture tag instead of img, the third photo (second of the two beneath) goes below. The picture "container" use 100% of the width with an img of 50% inside. It has been worthless to try to specify a width in any way I tried. And i tried A LOT of different codes. – Marco M. Sep 30 '22 at 09:15

0 Answers0