CODEWITHSUNDEEP
cssfigure
Rozo
Rozo

Reputation: 1

Shrink <figcaption> to sibling <img> and keep it responsive

This is the problem illustrated: here

I want to make the border which is figure tag to fit the img.

This is the html structure:

<div class="container">
    <figure>
        <img src="" alt="">
        <figcaption></figcaption>
    </figure>
</div>

and this is the css:

figure {
    border: 1px solid $color-light-gray;
    padding: 5px;

    img {
        max-width: 100%;
        height: 100%
    }

    figcaption {
        text-align: center;
    }
}

Upvotes: 0

Views: 322

Answers (3)

weegee
weegee

Reputation: 3399

Just scale your image according to your convenience, the parent div will scale on its own, like

figure {
  border: 1px solid #ccc;
  padding: 5px;

}
img {
  width: 100%;
  height: 100%
}

figcaption {
  text-align: center;
}
<div class="container">
    <figure>
        <img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="">
        <figcaption>Caption Caption Caption Caption Caption</figcaption>
    </figure>
</div>

Upvotes: 0

Joao Paulo Fechine Sette
Joao Paulo Fechine Sette

Reputation: 23

Use display:table in figure and display:table-caption in figcaption

Upvotes: 1

David
David

Reputation: 801

figure {
    border: 1px solid #ccc;
    padding: 5px;
    width: 100%;

    img {
        max-width: 50%;
        min-width: 50%;
        outline: solid 1px black;
    }

    figcaption {
        text-align: center;
        width: 50%;
    }
}

Just assign figcaption the width you require. Assign amax-width to img if you only wish for it to go half way across.

Upvotes: 0

Related Questions