画像境界は120x120中の画像は、アスペクト比を維持し

Question

実際の画像自体はに応じて調整しながら、私はDrupalの7のウェブサイト上で実現しようとしている

目標は、すべての画像（120x120）のために特定のサイズの記事画像の境界線を保っていますイメージスタイル（100x100）で、中央に配置されています。 （私は10の評判ポイントがないので例の画像を提供できません...）

したがって、ポートレート画像の場合、高さは100pxでキャップされ、幅はアスペクト比です。 横の画像と同じことです。幅は100pxに、高さは縦横比に関係なくです。

グレー境界が120x120ブロックのまますべてながら

、画像サイズに従って変化しません。

は、あなたがこれを解決を助けるために私のウェブサイトから任意のコードが必要なら、私に教えてください。

Answer 1

あなたの目標を達成する最も簡単な方法は、ディスプレイプロパティーをvertical-align: middleと親のdivに使用し、必要な境界、高さ、幅を設定することです。あなたのimgはmax-widthとmax-heightのプロパティを100％に設定する必要があります。したがって、このようなHTMLの構造を有する：

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

することはあなたのCSSは次のようになります。その結果を示す

.img-container { 
    width: 120px; 
    height: 120px; 
    display: table-cell; 
    vertical-align: middle; 
} 

.img-container > img { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    display: block; 
} 

Codepen：http://codepen.io/anon/pen/BpeOzG