figcaptionフィギュアの垂直高さ？

Question

私はfigureタグを持っています。その中にはimgとfigcaptionがあります。

私はあなたがおそらくブラウザの高さを一致させるためにvhを使用することになりました。この理由は、ということですで、ウィンドウサイズに基づいて可変である（figureの高さに一致するようにfigcaptionの幅を取得しようとしています私はfigcaption 90度を回転させ、図の高さに中心figcaptionテキストを希望しています。

Fiddle

HTML

<figure> 
    <img src="http://placehold.it/350x150"> 
    <figcaption>Title</figcaption> 
</figure> 

CSS

figure { 
    padding:20px; 
    display:block; 
    background:#ffa2df; 
    position: relative; 
} 

figure img { 
    width: 100%; 
    height: auto; 
} 

figcaption { 
    transform: rotate(-90deg); 
    transform-origin: 0 0; 
    text-align: center; 
    background: red; 
    position: absolute; 
    width: 100%; 
    height: 20px; 
    display:flex; 
    flex-direction: column; 
    float:left; 
} 

Answer 1

これは、絶対配置を使用し、内部回転要素も絶対に配置することによって可能です。

おそらくこれもクルージュですが、テキストは壊れませんが、高さは反応します。そこにメディアクエリが必要です。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
figure { 
 
    padding: 20px; 
 
    display: block; 
 
    background: #ffa2df; 
 
    position: relative; 
 
} 
 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
figcaption { 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 2em; 
 
} 
 
figcaption span { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    white-space: nowrap; 
 
    padding: 0 1em; 
 
    line-height: 2em; 
 
    transform-origin: top left; 
 
    transform: translate(0%, 100%) rotate(-90deg); 
 
    color: white; 
 
}

<figure> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <figcaption><span>Lorem ipsum dolor sit amet</span> 
 
    </figcaption> 
 
</figure>

代替：実験施設 - Writing Mode @ MDN

書き込みモードプロパティは、テキストの行が水平または垂直にレイアウトとブロックが進行する方向れているかどうかを定義します。

これは応答性があります。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
figure { 
 
    padding: 20px; 
 
    display: block; 
 
    background: #ffa2df; 
 
    position: relative; 
 
} 
 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
figcaption { 
 
    background: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    padding: .5em; 
 
    writing-mode: vertical-lr; 
 
    text-align: center; 
 
    color: white; 
 
}

<figure> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <figcaption>Lorem ipsum dolor sit amet 
 
    </figcaption> 
 
</figure>

残念ながら

Answer 2

たぶん、その場しのぎのビットが、これは動作します。図をテーブルにして、figcaptionの向きを保持し、回転させるdivを入れます。

figure { 
 
    display:table; 
 
    padding:20px; 
 
    background:#ffa2df; 
 
    direction:rtl; 
 
} 
 

 
figure img { 
 
    display:table-cell; 
 
    vertical-align:top; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
figcaption { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    width:20px; max-width:20px; 
 
    background: red; 
 
} 
 

 
figcaption div { 
 
    transform: rotate(-90deg); 
 
    transform-origin: 25% 25%; 
 
}

<figure> 
 
    <img src="http://placehold.it/350x150"> 
 
    <figcaption><div>Title</div></figcaption> 
 
</figure>

より良い答えが一緒に来れば、私は喜んでこれを削除しますよ！