The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> container queries on figure
Sentinel166
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 12:37 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC