レスポンシブコンテナ内で画像を垂直に配置するにはどうすればよいですか?

レスポンシブコンテナ内での画像の垂直方向の配置

課題

正方形のアスペクト比を維持するコンテナを含む HTML 構造があります。ブラウザウィンドウのサイズが変更されます。このコンテナ内に画像を追加しますが、画像が垂直方向に整列したままであることを確認する必要があります。画像の高さは可変であり、コンテナの高さを固定できないため、この課題が生じます。

解決策

CSS インライン要素の使用

1. コンテナ要素の最初 (または最後の) 子としてインラインブロック擬似要素を作成し、その高さを次のように設定します。コンテナの高さ全体を占めるには 100%。
2. 要素を垂直方向の中央に配置するには、vertical-align: middle を疑似要素と画像の両方に設定します。
3. 要素間の空白を削除します。フォントサイズの設定: 0;コンテナ要素上で文字 (スペース) によって占有されているスペースを削除します。

HTML:

<div class="container">
    <div>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">.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;        /* <h3 id="コンテナの作成Responsive">コンテナの作成Responsive</h3><p>幅に応じて高さが変更されるレスポンシブ コンテナを作成するには、次のことができます。上部/下部パディング プロパティにはパーセンテージ値を使用します。</p><pre class="brush:php;toolbar:false">.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   */
}

画像コンテンツのラップ

コンテナの上部または下部に余分なスペースができないようにするには、画像をラッパー要素でラップします。そしてそれをコンテナ内に完全に配置してスペース全体を埋めます:

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

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

の画像と CSS を含めます。配置

HTML:

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

  <div class="img-container">
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
  </div>
</div>

画像配置用の CSS:

.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;
}

ブラウザ互換性の代替

ブラウザ間の互換性を高めるために、次のことができます。画像コンテナの最初の子として div 要素を使用します。 pseudo-element:

HTML:

<div class="img-container">
    <div class="centerer"></div>
    <img src="/static/imghwm/default1.png" data-src="http://placehold.it/150x150" class="lazy" alt="">
</div>

CSS:

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

画像コントロールの max-* プロパティの使用

画像を保持するにはコンテナ内で幅が小さい場合は、max-height プロパティと max-width プロパティを使用できます。画像:

.img-container img {
    max-height: 100%;  /* Set maximum height to 100% of its parent */
    max-width: 100%;   /* Set maximum width to 100% of its parent */
}