3

このシナリオでは、画像はレスポンシブ デザインに対応していますが、キャプションはそれに合わせて調整されていません。

コードでは意味がありますがmax-width、ピクセル値を設定せずにどのように行うことができますか?


1 つの 内に 2 つの画像がありsection、それぞれ内figureにfigcaption:

<section>    
    <figure>
        <img src="link.jpg">
        <figcaption>Caption</figcaption>
    </figure>
    <figure>
        <img src="link.png">
        <figcaption>Caption</figcaption>
    </figure>
</section>

CSSでは、いくつかの設定を行いましたが、最も重要なのは、設定されたものimgですmax-width: 100%が、キャプションを同じようにする方法がないようです:

ここに画像の説明を入力

古いブラウザーを考慮したレスポンシブ デザインで、この重複をどのように回避できますか? または要素max-width: 300pxの設定とは別に。figuresection


ウィンドウを小さくすると、画像を小さくできるようにする必要があることに注意してください。

ここに画像の説明を入力

つまり、 はauto marginsなくなるはずです。(水平マージンは、狭いビューポートではスペースを浪費します。)

4

2 に答える 2

2

figcaptionをの幅にバインドするには、の幅imgに折りたたまれる要素の内側に両方をラップする必要があります。imgこの場合、私はdiv：を使用しました。

<figure>
    <div>
        <img src="http://www.phibetaiota.net/wp-content/uploads/2012/10/Google-Data-Center.jpg">
        <figcaption>First example caption</figcaption>
    </div>
</figure>

CSSを使用する場合：

section figure div {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
}

JSフィドルデモ。

overflowこれの特性を調整しdiv、明らかに好みに合わせて調整することをお勧めします。figureただし、要素を100％の幅のままにしておきたい場合は、の幅をの幅に制限するために、imgとを含む別の要素が必要です。figcaptionfigcaptionimg

于 2012-11-05T18:00:11.603 に答える