私は、画像の下に（オーバーラップしない）キャプションを表示する必要がある状況があります。画像のサイズもキャプションの長さも分かっていません。CSS画像とキャプション - 高さ100％一緒に
全体図形要素の高さは、100％のようにする必要がある：画像比率によって決定
要素の幅は動的であるべきであるが、キャプションは、それに応じて破断線べきです。私はお互いの隣にいくつかの画像を表示する必要があるので、これは重要です。
CSSでこれを実現する方法はありますか？
CSSテーブルを試しましたが、100％の高さでは動作しません。あなたはここに私の努力を見ることができます：
display: table
http://codepen.io/pju/pen/ZOmdEb
、独自の問題を抱えているフレキシボックス、と。
display: flex
http://codepen.io/pju/pen/QEJXNZ
私はビデオを提示する以外の目的のために<video>要素を使用することは非常にunsemanticですが、それは要素の属性posterが<img>よりも優れた画像を処理することを可能にすることを奇妙だということを知っています。実際のラッパーのディメンションは、環境（つまり、ボディ、ビューポート、別のラッパーなど）との関係で明確ではありませんでした。古い/無地CSSで
html,
body {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
background: #000;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.box {
display: table;
}
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: auto;
overflow: hidden;
display: table-row;
}
.image {
height: auto;
width: 100%;
}
.title {
font-size: 1.3em;
font-family: 'Raleway';
font-variant: small-caps;
line-height: 1.15;
text-align: center;
background: rgba(221, 126, 110, .2);
color: #EFEFEF;
}<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<section class='box'>
<figure class='frame'>
<video class='image' poster='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'></video>
<figcaption class='title'>Lena Söderberg 1972</figcaption>
</figure>
</section>
、実際にはできません。より新しいCSSではサイジング「数学」を実行できますが、サポートはまだ完全に普遍的ではありません。サイジングを計算し、それに応じてスタイルを設定するには、javascriptが必要です。 –
その合計は100％である必要がありますか？そして、もっと重要なのは、あなたの合計が希望の '100％ 'よりも大きい/小さいときに、何をしたいのですか？イメージを縮小/トリミングするか、イメージとキャプションの間にスペースを追加するだけですか？望ましい結果は完全には明らかではありません。 –
@AndreiGheorghiuコンテナ要素の高さの100％... 比率を維持しながら画像を縮小する必要があります。キャプションと画像の間のスペースは同じに留まるべきです。 – pjupju