Hi,
I have a similar issue to the one I had before, in my responsive img the chosen version displayed makes no sense, it’s too big for the displayed dimensions. Not systematically wrong or too big, but very often. In the case at hand the dimensions are “width: 353.625” and the image displayed is http://localhost:1313/Images/spirituality/joy_et_joan_hud0788d786452a701285dba7c2763d6b4_745198_604x0_resize_q92_h2_lanczos_2.webp
Output:
<img src="http://localhost:1313/Images/spirituality/joy_et_joan.webp" srcset="http://localhost:1313/Images/spirituality/joy_et_joan_hud0788d786452a701285dba7c2763d6b4_745198_200x0_resize_q92_h2_lanczos_2.webp 200w, http://localhost:1313/Images/spirituality/joy_et_joan_hud0788d786452a701285dba7c2763d6b4_745198_400x0_resize_q92_h2_lanczos_2.webp 400w, http://localhost:1313/Images/spirituality/joy_et_joan_hud0788d786452a701285dba7c2763d6b4_745198_604x0_resize_q92_h2_lanczos_2.webp 604w, http://localhost:1313/Images/spirituality/joy_et_joan.webp 800w" width="800" height="1131" loading="lazy" alt="dd" title="Joy & Joan" sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw" style="max-width:800px;">
Atributes renderhook:
sizes="(max-width: 400px) 100vw, (max-width: 604px) {{if in .Attributes.class "center"}}100vw, 70vw{{else}}50vw, 35vw{{end}}" {{with $img}}style="max-width:{{.Width}}px;max-height:min({{.Height}}px, 500px)"{{end}}></a>
As you see Did I misunderstand my own code ? You can see the logical (and intended behavior) should be to pick the 400px wide image, obviously. theoretically this is a html problem… But in practice really about hugo syntax.
Btw, in the output pasted here the max-height property in style is ignored… any idea why ? It doesn’t happen everywhere.