Discussion :

[sentinel66]

Bonjour,
J'ai cet élément, figure, qui contient des images.
Je veux le styler en fonction de sa taille: en dessous d'une certaine taille, qu'il ne flotte plus mais prenne toute la largeur d'écran.
J'ai lu que ce sont les container queries qui permettent cela, avec les at-rules "@container".
Le problème, est qu'utiliser une quelconque autre valeur que "normal" pour la propriété container-type, fait disparaître l'objet. Il n'est pas invisible, il est toujours présent dans l'arborescence DOM, mais sa largeur est 0px.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
figure{
	margin:auto;
	max-width:50%;
	float:right;
	clear:right;
	position:relative;
	z-index:1;}
figure img{
	margin:auto;
	width:100%;
	height:100%;}
}

ouptut:

Code html :

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

1
2
3
4
5
6
<figure id="normal">
  <figcaption class="figcaption_class">Find your origins lost&nbsp;to&nbsp;time</figcaption>
  <a href="ldskjflskjfldkjs" target="_blank">
    <img src="http://localhost:1313/Images/wallpaper/symbole_winter_forest.webp" width="1030" height="1280" loading="eager" alt="cover" title="Find your origins" sizes="(max-width: 400px) 100vw, (max-width: 604px) 50vw, 42.5vw">
  </a>
</figure>

[mathieu]

le 1er code que vous montrez n'est pas du code css.
est ce que vous utilisez un préprocesseur comme scss ou less ?

[sentinel66]

Geeez... Je ne comprendrai jamais pourquoi ce n'est pas simplement la norme. Le code était faux par contre.