質問

私は以下のコードを持っています。このコードは、ブラウザのサイズを変更したときに幅に応じて高さが変わるコンテナを設定します（正方形のアスペクト比を維持するため）。

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

コンテナ内のIMGを垂直方向に配置するにはどうすればよいですか？私の画像はすべて可変の高さを持っており、コンテナは、それが応答的であるため、固定高さ/行の高さを持つことができません... 助けてください!

どのように解決するのですか？

の中にあるインライン要素を整列させるテクニックを紹介します。 親 の中にあるインライン要素を、水平方向と垂直方向に同時に整列させるテクニックです。

垂直方向のアライメント

1) この手法では inline-block (の最初の（または最後の）子として（擬似）要素を作成します。 親 の最初の子、または最後の子として設定し、その height プロパティに 100% の高さをすべて取るために、その 親 .

2) また vertical-align: middle を追加すると、インライン(-block)要素が行間の真ん中に位置するようになります。そこで、そのCSS宣言を の最初の子 と 要素 (その 画像 )の両方が表示されます。

3) 最後に インライン(-ブロック) 要素間の空白文字を除去するために、フォントサイズを 親 によってゼロにすることができます。 font-size: 0; .

注意 Nicolas Gallagherの 画像置き換え技術 を以下のように使っています。

どのような利点があるのでしょうか？

• コンテナ( 親 ) は動的な次元を持つことができます。

• image 要素の寸法を明示的に指定する必要はありません。

• この方法を簡単に を整列させる <div> 要素を縦に並べる も同様に、動的な内容 (高さや幅) を持つことができます。ただし、その場合は font-size プロパティに div を使用して中のテキストを表示します。 オンライン・デモ .

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

出力

レスポンシブコンテナ

OPはすでにレスポンシブ・コンテナの作成方法を知っているので、このセクションは質問に答えるものではありません。しかし、どのように動作するかは説明します。

を作成するために の高さ を変更するために、コンテナ要素の 幅 (アスペクト比を尊重する)、top/bottom にパーセント値を使用することができます。 padding プロパティで指定できます。

A パーセント値 は、包含ブロックの幅に対する相対値です。

例えば

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

ここでは オンラインデモ . 下からの行をコメントアウトし、パネルのサイズを変更すると、その効果を見ることができます。

また padding プロパティに ダミー の子または :before / :after 擬似要素で同じ結果を得ることができます。しかし ノート のパーセンテージの値は、この場合 padding に対する相対値です。 幅 の .responsive-container そのものになります。

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

デモ#1 .

デモ#2 (使用方法 :after 擬似要素)

コンテンツの追加

使用方法 padding-top プロパティ を使用すると、大きなスペースが発生します。 の内部で、コンテンツの上部または下部に大きなスペースを発生させます。 コンテナ .

この問題を解決するには、コンテンツをラッパー要素でラップし、その要素をドキュメントの通常の流れから外すために 絶対位置指定 を使い、最後にラッパーを展開します。 top , right , bottom と left プロパティ) を使って、親プロセスのスペース全体を埋めるために コンテナ .

ほら、これだ。

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

ここでは オンラインデモ .

まとめ

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

ここでは 作業デモ .

明らかに ::before のための擬似要素 ブラウザの互換性 の最初の子として要素を作成します。 .img-container :

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

更新されたデモ .

使用方法 max-* プロパティ

ボックス内の画像を低い幅で表示させるために max-height と max-width プロパティを画像に設定します。

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

ここでは 更新されたデモ .