3

私は現在、画像要素にキャプションを追加しようとしているという問題に直面しています。キャプションの幅が画像よりも大きい場合は、キャプションを折り返す必要があります。

<figure class="caption">
    <a href="#" target="_blank">
        <img src="/sample_image" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap if it's width exceeds the width of the image</figcaption>
</figure>

通常は、次のような CSS コードを使用する必要があります。

figure {
    display: table;
    width: 50px;
}
figcaption {
    display: table-row;
}

問題は、これが次の CSS と組み合わせて機能しないことです。これは、モバイル デバイスの画像を自動スケーリングするために使用されます。

img {
    max-width: 100%;
}

したがって、ここに記載されているソリューションhttps://stackoverflow.com/a/617455/583569は機能しません。それは良い解決策ではないことは承知していますが、今のところ、すべての画像をさまざまな形式に変換するには時間がかかります。

この問題を解決するための非 JS ソリューションはありますか?

4

2 に答える 2

0

これでうまくいくと思いますが、このソリューションには制限があります。

これがHTMLの場合:

<figure class="caption">
    <a href="#" target="_blank">
        <img src="http://placehold.it/300x200" alt="">
    </a>
    <figcaption>This is a sample-caption that should wrap 
                if it's width exceeds the width of the image</figcaption>
</figure>

CSSを適用します。

figure {
    display: inline-block;
    position: relative;
    border: 1px dotted gray;
}
figure a {
    display: inline-block;
}
figure img {
    vertical-align: top;
    width: 100%;
    margin-bottom: 70px;
}

figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    height: 70px;
}

http://jsfiddle.net/audetwebdesign/H3Ngz/でフィドルのデモを参照してください。

コメント

主な問題は、 の幅を画像に合わせて縮小できるようにする必要があることです。これは、コンテンツに合わせて縮小する要素をfigure使用することはそれほど難しくありません。inline-block

figcaptionただし、幅を制限するために、画像でラップする必要があります。これは、 を設定して絶対配置を使用する場合に実行できますwidth: inherit。

これは別の問題につながります. の高さについてどうしますfigcaptionか?

キャプションの下にコンテンツがない場合は、キャプションを下に拡張するだけで、他のコンテンツと重なることはありません。

ただし、絶対配置であるため、キャプション テキストはコンテンツ フローから外れているため、ビュー ポートの幅が変更されるとテキストがリフローするため、キャプション テキストの高さを考慮する方法があります。

限定的ではありますが潜在的な修正方法はfigcaption、キャプションでスクロールバーの高さを指定するか許可することです。

問題は、キャプション テキストの長さがわからないことです...

少しの jQuery で、これらの制限のログを修正できます。

于 2013-08-27T13:00:37.090 に答える
0

これを試して ：

figure {
    display: inline-flex;
    position: absolute;   
}

figure img {
    width: 100%;
    margin-bottom: 70px;
}
figure figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 60px;
}
于 2020-07-15T05:36:26.830 に答える