1

レスポンシブ デザインで、 の幅に<figcaption>合わせて の幅を調整し<img>、それを超えないようにするにはどうすればよいですか?

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

対応する CSSは のみを制限し、 は制限し<img>ません。次を参照してください<figcaption>。

ここに画像の説明を入力

コンテナで (または 12.5em)を使用せずに、を<figcaption>とともに制約するにはどうすればよいですか?<img>max-width: 200px<figure>


CSS の重要な部分は次のとおりです ( JSFiddle で完全に説明されています)。

section figure {
    position: relative;
    margin: 0 auto; /* to center it */
}

section figure img {
    max-width: 100%;
    vertical-align: middle; /* to make sure images behave like blocks */
}

section figure figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
}
4

1 に答える 1

3

max-width: 100%; display: inline-block;（http://jsfiddle.net/vZpmq/1/）またはfloat: [left|right]（http://jsfiddle.net/cdmU3/1/）を設定sectionすると、コンテンツ（およびそれが入っているボックス）に合わせて縮小されます. ただし、これらの変更に合わせて他のものを作り直す必要があるかもしれません。

width: 100%; height: auto;または、 img に設定してみて、figure要素に幅を設定しますか? http://jsfiddle.net/9yUsP/

（要素自体に設定height: auto;されている属性に関係なく、imgアスペクト比を保持することを意味する設定）heightwidthimg

于 2012-12-04T15:05:24.820 に答える