Discussion :

[sentinel66]

J'ai un fond dégradé linéaire et j'utilise le chargement paresseux, bien. Sauf que les dimensions de l'objet et son rapport d'objet, avant et après le chargement, changent, et ne tiennent pas compte des attributs que j'ai donnés à l'objet, qui sont Img.width et Img.height, Img étant bien sûr la plus grande image (d'origine) .
La logique devrait être simple*: prenez la largeur et la hauteur de la plus grande image correspondant aux 100, 70 50 ou 35vw disponibles, et faites-en une boîte colorée jusqu'à ce que l'image soit chargée.
Mais cela ne fonctionne pas*: je constate un changement de mise en page substantiel lors du défilement suffisamment rapide pour que le chargement ne se fasse pas hors écran. L'objet a une taille différente avant et après le chargement. Je peux également voir ces dimensions en supprimant src et srcset dans l'arborescence DOM (outils de développement) pour voir l'arrière-plan derrière et remarquer que la taille ET le rapport changent.
Qu'est-ce qui ne va pas ?

Les dimensions sont toutes en pixels.
- ratio objet css : "auto 528/1349" -> 0,391401037806
- dimensions réelles affichées : 195.688/499.984, soit un ratio de 0,390781563126
- Largeur image / Hauteur image : 549 / 1328*: 0,413403614458
- dimensions si j'enlève les attributs src et srcset : 141.422 / 361.312 : 0,390581717452
cela ne correspond à aucune version d'image particulière, pas même la plus petite.

Je vois qu'il correspond à la propriété css auto object-ratio, censée être calculée avec les attributs width et height mais sans les faire correspondre du tout ? Cela me déconcerte.
Je veux juste que mon fond de couleur remplisse l'endroit où l'image sera une demi-seconde après, mais à la place, il occupe une très petite surface sans raison. Je pensais que les attributs hauteur et largeur avaient le dernier mot ?

html*:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<figure>
  <a href="/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" srcset="version1.webp 200w, version2.webp 400w, version3.webp 604w, version4.webp 800w, version5.webp 1024w, /Images/meta/shining_parody.webp {{$img-original.Width}}w" src="/Images/meta/shining_parody.webp" style="max-width:2741px;max-height:min(1848px,500px);background:linear-gradient(45deg,#2c2522,#d1cabd,#b89966,#a26335)">
  </a>
</figure>

La largeur maximale par image avec la fonction min s'est avérée le seul moyen d'obtenir "la taille intrinsèque chaque fois qu'elle convient". Le vrai code a un script Golang au lieu d'une largeur et d'une hauteur spécifiques,
CSS supplémentaires*:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
figure {
  a {
    display: flex;
    max-width: 50%;
    cursor: zoom-in;
  }
  img {
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: auto;
  }
}

Merci pour votre aide ;-)

[Dave Hiock]

\ô/
si tu codes ton css en CSS Nesting, celui-ci est non conforme.

A nested style rule is exactly like a normal style rule, with the exception that its selector cannot start with an identifier or functional notation. Additionally, nested style rules can use relative selectors.

Il te faudrait l'écrire comme cela par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
figure {
  & a {
    display: flex;
    max-width: 50%;
    cursor: zoom-in;
  }
  & img {
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: auto;
  }
}