container queries on figure |
container queries on figure |
Sentinel166 |
Oct 31 2023, 05:03 AM
Post
#1
|
Novice Group: Members Posts: 21 Joined: 19-March 23 Member No.: 28,859 |
Hi, I want to change the size and styling of figure elements to change dynamically depending on the dimensions of `article`, their container, direct or indirect.
Can I use container queries for that ? Here is an idea of the structure of my pages: CODE <html> <body> <nav id=book-menu></nav><nav id=book-toc></nav> <article> <header></header> \\ HERE, exemple <figure><figcaption>The answer is to observe wild animals, to discover our original food range.</figcaption><a href="illustration_instincto.webp" target="_blank"><img src="illustration_instincto.webp" srcset=& #34;illustration_instincto_hu3bd0ca02a54b400d23d6ee6dd746e21a_2936700_200x0_resi ze_q100_h2_lanczos_2.webp 200w, illustration_instincto_hu3bd0ca02a54b400d23d6ee6dd746e21a_2936700_400x0_resize_q 100_h2_lanczos_2.webp 400w, illustration_instincto_hu3bd0ca02a54b400d23d6ee6dd746e21a_2936700_604x0_resize_q 100_h2_lanczos_2.webp 604w, illustration_instincto_hu3bd0ca02a54b400d23d6ee6dd746e21a_2936700_800x0_resize_q 100_h2_lanczos_2.webp 800w, illustration_instincto_hu3bd0ca02a54b400d23d6ee6dd746e21a_2936700_1024x0_resize_ q100_h2_lanczos_2.webp 1024w, illustration_instincto.webp 1920w" loading="eager" fetchpriority="high" alt="Illustration of our original food range" title="The answer is to observe wild animals, to discover our original food range." sizes="(max-width: 400px) 100vw, (max-width: 604px) 100vw, 70vw" width="1920" height="1080" style="max-width:1920px;max-height:min(1080px,500px)"></a></figure> </article> </body> </html> Currently the styling is mainly (I use SASS): CODE figure{ margin:auto; max-width:50%; position:relative; float:right; clear:right; >a {cursor: zoom-in; display:flex; &::after {display:none}} img{margin:auto; object-fit: contain; width:100%;height:100%;} } Currently I use mediaqueries but it's really not optimal, because the dimensions of `article`, the real container, itself changes dynamically with the viewport. Also, is it possible to use containerqueries to change an element's style based on its OWN dimensions, not his container ? Thanks |
Lo-Fi Version | Time is now: 26th September 2024 - 04:44 AM |