20

假设我有以下 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）来实现图像标题包装到不比图像宽，以及图像不比视口宽？

4

7 回答 7

38

我遇到了同样的问题，并且受此启发，提出了一个相当简洁的解决方案。

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;
}​

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

图形的宽度将是图像的原始宽度，除非该宽度以其他方式受到限制。

于 2012-11-13T15:19:27.730 回答
4

那么是否可以使用 CSS（2 或 3）来实现图像标题包装到不比图像宽，以及图像不比视口宽？

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

演示

只是为了完整性：

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

1) 设置display: table-caption;在figcaption

演示

2) 设置width: min-content在figure

演示

于 2015-02-05T10:25:36.443 回答
0

图像缩放重要吗？如果没有，请考虑使用背景图像。

纯 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：

<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>
于 2012-04-22T01:39:19.880 回答
0

超级老问题，但我目前处于同样的情况，我想我找到了一个非常简单的解决方案。诚然，我只在最新版本中对此进行了测试，目前是：IE 11 FF 37 Chrome 40

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

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

就是这样。我不知道这是否是将来会修复的怪癖，但它现在运行良好。如果图片大于 50px，figure 和 figcaption 会自动调整大小。如果小于50px，则标题保持50px；

于 2015-02-04T12:39:18.177 回答
0

因为我们今天有 flexbox，所以这可能也适用。以下将根据图像宽度自动调整，因此不要在样式表中设置硬编码值。（Yuk！）一定要遵循今天的最佳实践，并确保图像同时具有高度和宽度属性。

figure {
float: left;
margin-right: 1em;
margin-bottom: 1em;
display: inline-flex;
flex-wrap: wrap;
}

figcaption {
width: min-content;
flex: 1; 
}

figure > img {
flex: 1 0 100%;
}
于 2022-01-03T22:39:03.480 回答
0

如果使用 Bootstrap，您可以通过设置断点宽度来轻松解决问题，例如 class="col-12 col-md-6 col-lg-5 col-xl-4"。图像及其标题都将很好地适应给定的尺寸，如果标题对于其图像宽度来说太长，它将适当地换行。

于 2020-01-14T22:49:43.990 回答
0

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

而不是硬编码大小使用min-content.

figure {
    display: block;
    border: 1px dotted blue;
    margin: 3px;
}
figure>figure {
    display: inline-block;
    border: 2px solid red;
    width: min-content;
}
<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>

于 2017-08-30T13:08:07.550 回答