What width-code for responsive image with figure as parent

Forum Moderators: not2easy

Message Too Old, No Replies

What width-code for responsive image with figure as parent

Responsive width codes for img and figure if desktop-first

deeper

12:17 pm on May 29, 2025 (gmt 0)

Hi there,
my header image (img) has the standard code for becoming responsive, max-width: 100%. Now its parent element "figure" has to do the rest of the job by getting also a proper width-styling.

As the header image only needs to resize smaller than its native size (mobile by "desktop-first"), the wanted width-code of the figure should be "max-width: 800px".
Parent of figure is the header element, which is bigger than the image, about 1100 px. So far so good.

Searching throught the web I found similar examples using additionally width 100% for figure , i.e., two width stylings for figure.
Does this make any sense in my case? I think I should drop this second 100%-width for figure, right?


img.header1 {
 max-width: 100%; 
 height: auto; 
}


figure.header2 {
 width: 100%; /* why? */
 max-width: 800px; 
}

lucy24

4:07 pm on May 29, 2025 (gmt 0)

I'm a little uneasy about "width" and "max-width" attached to the same element, as one may override the other, and not necessarily in the way you want.

It may help to post a bit of the relevant html so we can see how it relates to the css.

Does “figure” have any content other than the image? If not, there's no reason to concern yourself with its width, since anything that doesn’t have an inherent width will default to the width of its container.

:: detour to whatwg because I’m quite certain I have never encountered the “figure” element ::

not2easy

4:21 pm on May 29, 2025 (gmt 0)

The figure element is commonly used as a container for content that may be shown in multiple locations on a page or on a site. It could be an image and its caption or a graph with its caption. I was hoping to see the outer CSS, since the <figure> element is within the <header> element and we don't know what with controls are already applied.

As lucy24 suggested, including the (exemplified) portion of the relevant html would help here.

deeper

7:49 pm on May 29, 2025 (gmt 0)

In this case, there is just the header image, nothing else referring to it. There are other image variations on the site, with caption (using figcaption then), single image with floating text, two images next to each (with or without caption), divider graphics ect.

I don't like div and p as image containers any more.

Testing it with VSC, both ways work, i.e., both with and without additionally "width: 100%" for figure seem to do their responsive job properly.
But hey, there are a lot of smartphones and tablets, a lot of browsers, screenreaders and other accessibility devices.
Therefore I'd like to have a clean code, which supports semantic and accessibility. And which I may use as a basis for similar image usings.

I know about usually having several ways to achieve something in CSS, but I'm just a hobby coder and therefore I really like to stick to this simple sort of code, which I understand.

@lucy24:
The image is a link, too. Like many header images it links to the homepage, but there is no real further content in figure.

The HTML is nothing fancy I guess:


<body>
 <div class="big-container">
 <header>
  <figure class="header2"><a class="" href="https://www.homepage.de" title=""><img class="header1" src="..." width="800" height="250" alt=""></a>
  </figure>
 </header>
...