How can I make the width of my figcaption match the width of the img inside its figure tag?
This will place the figcaption
side by side with the img
:
figure {
display: table;
}
img, figcaption {
display: table-cell;
vertical-align: bottom;
}
figcaption {
padding-left: 4px;
}
Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure
to stay at 200px width, but then you comment that you want the figcaption
to appear to the right, which would make the figure
wider. If all you want is for the figcaption
to be restricted to the width of the image, this should work:
figure {
display: table;
width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
display: table-row;
}
Can a figcaption be restricted to the width of a responsively sized image?
I came across the same issue and was able to come up with a fairly neat solution, inspired by this.
HTML:
<figure>
<img src="http://www.placehold.it/300x150" alt="" />
<figcaption>Make me as long as you like</figcaption>
</figure>
CSS:
figure {
display: table;
padding: 5px;
background-color: #fff;
font-size: .875em;
}
figure img {
display: block;
max-width: 100%;
}
figcaption {
display: table-caption;
caption-side: bottom;
background: #fff;
padding: 0 5px 5px;
}
This ensures the figcaption
does not exceed the width of the figure
, whilst allowing you to keep max-width
on the image. Works in all good browsers and IE8+.
The figure's width will be whatever the native width of the image is, unless that width is restricted in some other way.
Floating figure with figcaption matching image width. CSS solution that works in both Firefox and Chrome
This CSS seems to create the desired output in Firefox and Chrome. It uses table
, table-cell
and table-caption
for all the components and removes the 100% width on the caption.
div {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
figure {
position: relative;
max-width: 85%;
margin: auto;
display: table;
}
img {
width: 300px;
height: 150px;
background: #000;
display: table-cell;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
How to make image caption width to match image width?
You can use the CSS display:table
+ table-caption
solution.
.figure {
display: table;
margin: 0;
}
.figure img {
max-width: 100%;
}
.figcaption {
display: table-caption;
caption-side: bottom;
background: pink;
padding: 10px;
}
<h3>Example of small image</h3>
<figure class="figure">
<img src="//dummyimage.com/300x100" alt="Sample Image">
<figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
<h3>Example of large image</h3>
<figure class="figure">
<img src="//dummyimage.com/900x100" alt="Sample Image">
<figcaption class="figcaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
How to get img to be the same width as figcaption?
Setting max-width: 100%; display: inline-block;
(http://jsfiddle.net/vZpmq/1/) or float: [left|right]
(http://jsfiddle.net/cdmU3/1/) on the section
would cause it to shrink-to-fit it's content (and the box it's in). You might need to rework some other things to fit those changes, though.
Alternatively, try setting width: 100%; height: auto;
on the img, and set the width on the figure
element? http://jsfiddle.net/9yUsP/
(setting height: auto;
on the img
means it's retain it's aspect ratio regardless of height
or width
attributes set on the img
element itself)
How to match width of text to width of dynamically sized image/title?
Make the container inline-block
(or any shrink-to-fit configuration like table
,inline-grid
,inline-flex
, float
,absolute
etc) then force the width of text to be 0
so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100%
using min-width
.parent {
background: pink;
display:inline-block;
}
img {
display: block;
max-height: 70vh;
}
.description {
width:0;
min-width:100%;
}
<div class="parent">
<img src="https://picsum.photos/id/1004/900/600">
<div class="description">
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
</div>
</div>
Limiting caption to width of the image
One method would be to make your figure
elements flex containers, and set their alignment to flex-direction: column
. This would give you more control over the width of the entire element.
.flex-container { padding: 0; margin: 0; list-style: none; display: flex; flex-flow: row wrap; justify-content: flex-start;}.flex-figure-item { padding: 5px; margin-top: 10px; line-height: 10px; font-weight: bold; font-size: 1em; display: flex; /* NEW */ flex-direction: column; /* NEW */ width: 150px; /* NEW */}figcaption { color: black;}
<div class="flex-container"> <figure class="flex-figure-item"> <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>Short, John</figcaption> </figure> <figure class="flex-figure-item"> <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>WrapMe, Longname should not go past right side of image</figcaption> </figure> <figure class="flex-figure-item"> <img src="https://placehold.it/150x200" alt="placeholder"> <figcaption>Short, Sally</figcaption> </figure></div>
Related Topics
How to Create a 'Parallelogram' Shape in CSS with a Straight Side
How to Avoid Double Border from the Multiple <Li>
CSS Spread <Li> Horizontally Across <Ul>
Does Chrome Have Issue with Setting A:Visited CSS Properties
How to Make the Absolute Child Width Independent from the Relative Parent Width
Putting Emoticons in Paragraphs Without Affecting 'Line-Height'
Web Extension:How to Use "Browser_Style = True"
Why Do Fixed Elements Slow Down Scrolling in Firefox
Which CSS Pseudo-Classes Don't Have Specificity
How to Create a Div with a Diagonal (Or Angled) Top Line
Scrolling Inside Nested Flexboxes
How to Style the Default Wordpress Audio Player with CSS
CSS 2, Precedence of Stylesheets Imported Using Link Element
Shape-Outside of an Image Centered Between Two Text Blocks