[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック

デモページ：幅480pxで表示 実装 実装のイメージ 画像のサイズは100%で設定し、高さ・幅の上限は画像を内包するdiv要素で設定します。 また、垂直方向の中央に配置するために、「overflow: hidden;」を使って余剰分を隠します。 実装のイメージ：天地均等にクリップ [ad#ad-2] HTML 画像はimg要素で配置し、div要素で内包します。 <div class="image-wrap" id="wrapper"> <img src="path/to/your/image.jpg" alt="your image"> </div> CSS 上限の高さを450pxに設定します。 .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; -webkit-transition: max-width

[josch_so36]

一つのイメージをいろいろと使い回すのに使えそうなテクニックだけど...詳細は後ほど確認。

[choromo]

【高さが一定でない場合の書き方ってないんだろうか】 「[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス」

[ichitaso]

画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック [あとで読む]

[warriorking]

(CSS)画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

[nors]

http://solemone.de/code/responsive-web-design-overflow-image-with-vertical-centering/

[hiroshi_revolution]

画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

[Donca]

✔ [CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック