container query fait disparaître mon image (figure element)
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:
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:
1
2
3
4
5
6
| <figure id="normal">
<figcaption class="figcaption_class">Find your origins lost to 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> |
