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

しかし、これら2つの組み合わせは、ひどい混乱を招きます。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は自動的にサイズ変更されます。50ピクセル未満の場合、キャプションは50ピクセルのままです。

于 2015-02-04T12:39:18.177 に答える
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 に答える
0

Bootstrapを使用している場合は、ブレークポイントの幅をたとえばclass = "col-12 col-md-6 col-lg-5 col-xl-4"に設定することで、問題を簡単に修正できます。画像とそのキャプションの両方が指定されたサイズにうまく収まり、キャプションが画像の幅に対して長すぎる場合は、適切に折り返されます。

于 2020-01-14T22:49:43.990 に答える
0

今日はフレックスボックスがあるので、これもうまくいくかもしれません。以下は画像の幅に基づいて自動調整されるため、スタイルシート内にハードコードされた値を設定しないでください。（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 に答える