Question

说我有以下HTML：

<figure>
<img alt="Sun" src="sun.gif" width="256" height="256" />
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</figure>

如果我希望文本换行到图像的宽度，我需要这个CSS：

figure {
    display: table;
    width: 1px;
}

如果我希望图像“响应” - 也就是说，不要比视口大 - 我也需要这个CSS：

img {
    max-width: 100%;
}

但结合这两个导致了一个可怕的混乱！现在img的父级具有明确的宽度设置，max-width导致整个数字真的非常小（尽管不是1px）。

那么可以使用CSS（2或3）来实现两者图像标题包裹不比图像宽，图像不比视口宽吗？

Answer 1

旧问题，但我遇到了同样的问题，能够提出a fairly neat solution，受到this的启发。

HTML：

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>

CSS：

figure {
   background-color: #fff;
   padding: 5px;
   font-size: .875em;
   display: table;
}

figure img {
    display: block;
    width: 100%;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    background: #fff;
    padding: 0 5px 5px;
}

这可确保figcaption不超过figure的宽度，同时允许您在图片上保留max-width。适用于所有优秀的浏览器和IE8 +。

有Firefox bug阻止max-width在设置为display: table的元素中工作。因此，不是在图像上使用max-width，而是将其宽度设置为100％意味着它可以跨浏览器工作。图的宽度将是图像的原始宽度，除非该宽度以其他方式受到限制。

Answer 2

因此可以使用CSS（2或3）来实现图像标题包裹到不比图像宽，并且图像不比图像宽视口？

是。只需使用img - max-width: 100vw;上的视口单元，而不是％ - max-width: 100%;

DEMO

仅为完整性：

还有其他两种技术可以将文本换行到图像的宽度：

1）在display: table-caption;

上设置figcaption

DEMO

2）在width: min-content

上设置figure

DEMO

Answer 3

图像缩放是否重要？如果没有，则考虑使用背景图像。

PURE CSS ：

<figure>
<div class="caption">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{
background:url(sun.gif) no-repeat 0 0 scroll;
width:256px;
height:256px;
position:absolute;
}
</style>

CSS IN INLINE STYLING：

<figure>
<div class="caption" style="background:url(sun.gif) no-repeat 0 0 scroll;width:256px;height:256px;">
<figcaption>The Sun - a sinister and destructive force. Image from
the SOHO research facility.</figcaption>
</div>
</figure>
<style type="text/css">
figure{display:table;width:1px;position:relative;}
figure div.caption{position:absolute;}
</style>

Answer 4

超级老问题，但我目前情况相同，我认为我找到了一个非常简单的解决方案。不可否认，我只是在最新版本中对此进行了测试，目前这些版本是： IE 11 FF 37 Chrome 40

<figure>
   <img>
   <figcaption>
</figure>

figure {
   display: table;
   width: 50px; /* Set this to the minimum caption width */
}

就是这样。我不知道这是一个将来会修复的怪癖，但它现在效果很好。如果图像大于50像素，则图形和图形将自动调整大小。如果小于50px，则标题保持50px;

Answer 5

如果我希望文本换行到图像的宽度，我需要这个CSS： [...]

使用min-content来代替硬编码大小。

＆＃13;

figure {
    display: block;
    border: 1px dotted blue;
    margin: 3px;
}
figure>figure {
    display: inline-block;
    border: 2px solid red;
    width: min-content;
}

＆＃13;

<figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum  </figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100"  alt="An image of a bunny rabbit." />
		<figcaption>Lorem ipsum dolor sit amet, consectetur</figcaption>
	</figure>
	<figure>
	 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem </figcaption>
	</figure>
	<figure>
		 <img src="https://dummyimage.com/200x100" alt="An image of a bunny rabbit."/>
		<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, molestiae, similique ullam labore soluta autem placeat officia </figcaption>
	</figure>
</figure>

＆＃13;

Answer 6

如果使用Bootstrap，则可以通过在上设置断点宽度来轻松解决问题，例如class =“ col-12 col-md-6 col-lg-5 col-xl-4”。图像及其标题都将很好地适合给定的大小，并且如果标题对于其图像宽度而言过长，则会适当地换行。

figcaption可以限制在响应大小的图像的宽度？

6 个答案:

DEMO

DEMO

DEMO