Html/css issue with object ratio in img, hugo template solution

support
1

I know this is mostly (maybe ?) a html and css issue, but the solution will be full of hugo jargon so I’d better ask here. Although feel free to tell me to get lost if I’m wrong, I won’t be offended :wink: I just wish to understand what’s going on, if I do I’ll figure out the solution, or or that there is none.

I have a linear gradient background and use lazy loading, good. Except that the dimensions of the object and its object ratio, before and after the loading, change, and disregard the attributes I gave to the object, which are Img.width and Img.height, Img being of course the biggest (original) image.
This is the code I use:

{{with $img}}width=“{{.Width}}” height=“{{.Height}}” {{end}}loading=“{{with .Attributes.loading}}{{ . }}{{else}}lazy{{end}}” {{with .Attributes.loading}}fetchpriority=high{{end}} alt=“{{ default .Title .Text }}” {{ with .Title }}title=“{{ .|plainify }}”{{end }} 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); background:linear-gradient(45deg, {{delimit $smallest.Colors “,”}})”{{end}}

Dimensions are all in pixels. Now the weird part:

  • css object-ratio: “auto 528/1349” → 0,391401037806
  • actual dimensions displayed: 195.688/499.984, giving a ratio of 0,390781563126
  • Img.width / Img.height: 549 / 1328 : 0,413403614458
  • dimensions if I remove the src and srcset attributes: 141.422 / 361.312: 0,390581717452
    this corresponds to no particular image versions, not even the smallest one.

I see that it matches the auto object-ratio css property, supposedly computed with the width and height attributes yet without matching them at all ? This baffles me.
I just want my color background to fill the damn place the image will be half a second after, but instead it occupies a very small surface for no reason. I thought the height and width attributes had the last word ?
The logic should be simple: Take the width and height of the biggest image fitting the 100, 70 50 or 35vw available, and make a colorful box with it until the image is loaded.

Lastly, in case it is the css that interfers, along with the style attribute above I have the following, supposed to say: make it as big as you can but not bigger than its parent or intrinsic size.

figure {
  max-width:50%;
  a {display:flex; cursor: zoom-in}
  img{z-index:1;margin:auto;width:100%;height:100%;}
}

Thanks…

2

It’s not related to Hugo, as you said. First, I’d get rid of the inline style with max-width and max-height. Removing a src attribute from img does, in my mind, not make any sense. But you should really ask elsewhere. And provide the people there with relevant information, like the generated HTML.

Also, your CSS is not CSS – a figure element doesn’t have an a attribute nor does it have an img attribute. It might be SASS or something like that, I don’t know.

3

Mmm ? img and a are not attributes but rule sets. A link in a figure is not very standard, true, but img is: “Use a <figure> element to mark up a photo in a document, and a element to define a caption for the photo:”. So vanilla css here.
I remove the src and srcset part to see the background behind, and see that the dimensions become something else, which is surprising. The per-image max-width with the min function has proven the only way to get “intrinsic size whenever it fits”. This was so, so not straightforward it is, I would never have imagined.

Anyway, sure, I ask elsewhere. to my defense, replies here, even negative ones, are usually so on-point and quick that it’s very tempting.

Here's the code, if someone's interested. 
<figure><a href="http://localhost:1313/Images/meta/shining_parody.webp" target="_blank"><img width="2741" height="1848" loading="lazy" alt="illustration of feedback aping Shining" sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 35vw" style="max-width:2741px;max-height:min(1848px,500px);background:linear-gradient(45deg,#2c2522,#d1cabd,#b89966,#a26335)" srcset="http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_200x0_resize_q92_h2_lanczos_2.webp 200w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_400x0_resize_q92_h2_lanczos_2.webp 400w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_604x0_resize_q92_h2_lanczos_2.webp 604w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_800x0_resize_q92_h2_lanczos_2.webp 800w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1024x0_resize_q92_h2_lanczos_2.webp 1024w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1240x0_resize_q92_h2_lanczos_2.webp 1240w, http://localhost:1313/Images/meta/shining_parody_hu667728d2f360056b02284d498a867f63_3781084_1540x0_resize_q92_h2_lanczos_2.webp 1540w, http://localhost:1313/Images/meta/shining_parody.webp 2741w" src="http://localhost:1313/Images/meta/shining_parody.webp"></a></figure>
4

You can’t have nested rule sets in CSS, afaik. But that’s what you’re writing in your “CSS”

5

I had no idea that wasn’t standard. It felt like everyone and their dog write it. That’s why I couldn’t use it for inline styling I suppose. Thanks for the info, and long live SASS/LESS…

6

You can do this (CSS):

figure {
  max-width:50%;
  & a {display:flex; cursor: zoom-in}
  & img{z-index:1;margin:auto;width:100%;height:100%;}
}

…but browser support is not 100%.

https://www.w3.org/TR/css-nesting-1/
https://caniuse.com/css-nesting

1 Like
7

To get 100% browser support (instead of 70%) write:

figure {max-width:50%;}
figure a {display:flex;cursor: zoom-in;}
figure img {z-index:1;margin:auto;width:100%;height:100%;}
8

Geez… Thank the transpiler made that unecessary.
The final css produced reads article figure a{display:flex;cursor:zoom-in}article figure a::after{display:none}, taking care of those less than 3% (high-balling) users who must have lived in a cave for the last decade :wink:

9

That is good to know. I like the shorter notation. Learning how to write non-native CSS is something I never found the time for… :wink:

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.