web-dev-qa-db-ja.com

レスポンシブな高さでdiv内の画像を垂直方向に揃える

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

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をコンテナの内側に垂直に配置するにはどうすればよいですか。私のすべての画像は高さが可変で、コンテナは高さ/行の高さを固定できません。

htmlcssresponsive-designvertical-alignment
130
user1794295

これは、親内のインライン要素を、水平方向と垂直方向に同時に整列させるための手法です。

垂直方向の配置

1）このアプローチでは、親の最初（または最後）の子としてinline-block（pseudo-）要素を作成します。そのheightプロパティを100%に設定して、その親のすべての高さを取得します。

2）また、vertical-align: middleを追加すると、インライン（-block）要素が行スペースの中央に保持されます。したがって、そのCSS宣言を最初の子と要素（画像）の両方に追加します。 。

3）最後に、インライン（-block）要素間の空白文字を削除するために、 親をfont-size: 0;でゼロにする。

注：以下では、Nicolas Gallagherの イメージ置換手法 を使用しました。

利点は何ですか？

<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 */
}

出力

Vertically align an element in its container

レスポンシブコンテナ

OPは既にレスポンシブコンテナを作成する方法を知っているため、このセクションでは質問に答えません。しかし、その仕組みについて説明します。

コンテナ要素の高さを幅に合わせて変更する（アスペクト比を考慮して）には、top /にパーセント値を使用できます。下のpaddingプロパティ。

上/下の余白または余白の パーセント値 は、包含ブロックの幅に対する相対値です。

例えば：

.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プロパティ を使用すると、コンテナ内のコンテンツの上部または下部に巨大なスペース が表示されます。

これを修正するために、コンテンツをwrapper要素でラップし、 absolute orientation を使用してドキュメントの通常のフローからその要素を削除し、最後にwrapperを展開します（bu 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;
}

これがWORKING DEMOです。

明らかに、ブラウザ互換性のために::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%;
}

UPDATE DEMO。

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 */
}

これがUPDATE DEMOです。

380
Hashem Qolami

Flexboxではこれは簡単です。

フィドル

以下を画像コンテナに追加するだけです。

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}
46
Danield

すでにマークアップがあるので、このCSSを使用してください。

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

これがJsBinの作業です。 http://jsbin.com/ihilUnI/1/edit

この方法は正方形の画像に対してのみ有効です（マージントップ値のパーセンテージは高さではなくコンテナの幅に依存するため）。ランダムサイズの画像の場合は、次の操作を実行できます。

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

実用的なJsBinソリューション： http://jsbin.com/ihilUnI/2/edit

16
Tibos

margin: autoと絶対位置を使用して、画像を水平方向と垂直方向の両方に中央揃えできます。また：

  1. 疑似要素を使用して余分なマークアップを捨てることは可能です。
  2. 左、上、右、下の負の値を使用して、大きい画像の中央部分を表示することができます。
.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}
<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>
11
Salman A

これを試してください

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }
4
user2678106

これは、垂直方向と水平方向の両方に任意のコンテンツを中央揃えできるようにする手法です。

基本的に、あなたはただ2つのコンテナを必要とし、あなたの要素が以下の基準を満たすことを確認してください。

Outherコンテナ

  • display: table;があるはずです

内容器：

  • display: table-cell;があるはずです
  • vertical-align: middle;があるはずです
  • text-align: center;があるはずです

コンテンツボックス：

  • display: inline-block;があるはずです

この方法を使用する場合は、コンテンツボックスに自分のイメージを（一緒に使いたい他のコンテンツとともに）追加するだけです。

デモ：

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

this Fiddle もご覧ください。

2
John Slegers

私はこのスレッドに出会った。

  • 与えられた画像の幅の100％を使う
  • 画像の縦横比を維持する
  • 画像を中央に垂直に配置します
  • flexを完全にはサポートしていないブラウザで動作します。

上記の解決策をテストするいくつかのこの基準をすべて満たすものが見つからなかったため、この単純な解決策をまとめると、他のユーザーがこれらの条件を満たす必要があります。同じ：

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}
<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

JSFiddleの作業例

2
Alexandra

hTMLコード

<div class="image-container"> <img src=""/> </div>

cSSコード

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }
0
William

やってみる

HTML

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

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}
0
Paramasivan

別のdivを作り、divの中に 'dummy'と 'img-container'の両方を追加します

次のようにHTMLとCSSをする

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}
<div class="responsive-container">
    <div class="inner-container">
                <div class="dummy">Sample</div>
                <div class="img-container">
                        Image tag
                </div>
        </div>    
</div>

'レスポンシブコンテナ'を100％にする代わりに、必要な高さを指定できます。

0
Discover