CODEWITHSUNDEEP
cssimage-resizingfigure
Kai88
Kai88

Reputation: 69

How to keep the w/h:auto resizable ability of an img inside figure/img/figcaption

Keeping the w/h:auto resizable ability of an img when its parent is set to display:table and the parent's w/h is not 100%? It seems obvious that if the parent's w/h is not set then its child's w/h:auto makes not much sense. My point is, I want to keep the "resizable ability" of an img if it is inside figure/img/figcaption. Description of the problem:

Big images in a gallery we may want to resize to fit the window size if bigger. If it is just an image it can be done easily setting the image's w/h to auto (and maxw/maxh to 100%), with adding margin:auto we get it even nicely centered. But how to achieve the same with figure/img/figcaption altogether? As we want the figcaption's width to match the width of the image dynamically on the fly (not in px) we need to set figcaption display:table-caption (plus caption-side:bottom) and figure display:table. But once we set the figure display:table and its w/h is not set (or is set to auto, otherwise figcaption width will not match the img's), image w/h:auto don't work any more (not much surprisingly) and we get a not desirable 100% of w/h of the img (will not fit into the window if bigger). Is there any CSS only solution how to keep w/h:auto of the img or somehow achieve the same resizable ability if it is inside figure/img/figcaption?

There are many great approaches out there of how to center or resize elements or images, for example here <codepen.io/shshaw/full/gEiDt> or here <codepen.io/dimsemenov/pen/jhsJL>, but these and many more elsewhere don't work with a set of figure/img/figcaption (or I was unable to make it work). I am troubling myslef with it literally for days long with no clear answer.

In other words, what I need: A figure/img/figcaption set is centered altogether, they will resize if the image is bigger than window size, figcaption must match the width of the image width. All should be done with CSS and without setting anything in px.

Upvotes: 0

Views: 1803

Answers (1)

Remy Sheppard
Remy Sheppard

Reputation: 247

So <img> and <figcaption> all go inside a <figure> element. All three are block elements.

You would just set the height and width of your <figure> element, then add a margin auto like you said.

Then set in your css:

img {
    width: 100%;
    height: auto;
}
figcaption {
    text-align: center;
    width:100%;
}

And now your image and your caption will always be the width of the figure element, the text will always be centered under the image, and the larger element will always be centered on the page.

EDIT: Adding 100% as a width or height to something means "100% of the parent element". So if you set a width/height for your figure element, the elements inside can be 100% and they won't break the element. Again, all three are block elements already, so you don't need to re-declare them as display: table-caption or whatever. Just use the strength of the block element as it is.

EDIT 2: OKAY. Here's what you need:

Set the figure to a specific height and width in CSS.

Then set the img and figure inside your fig caption to: width: 100%; height: auto;.

Your html looks like this:

<body>
    <figure>
        <img src="">
        <figcaption>Some Text</figcaption>
    </figure>
</body>

Now you need a media query in your CSS to handle the size of <figure>

@media screen and (max-width: 600px) {
    figure {
        width: /*Whatever width you want*/
        height: /*Whatever height oyu want*/
    }
}

Then repeat your media query for different break points.

If you still think I'm wrong, make a codepen or fiddle with an example and I'll help you from there.

EDIT 3

Here is a JSFiddle demonstrating that you can make a responsive image and element using relative measurements in % and maintaining the image centered to the things around it.

http://jsfiddle.net/o2rv4t9h/1/

Upvotes: 1

Related Questions