縦横比の違う画像を同じ比率にて表示したい

Question

WordPressを使用して、ポートフォリオ風に写真をたくさん並べるようなページを作成中です。

レスポンシブのテーマを使用しており、写真を格納している【div class="box"】のCSSに【width: 20%】を指定し、横に写真が5枚並ぶ校正としています。

しかし、載せたい写真のサイズが違うものが多く、大きさもそうですが、縦横比が3:2や4:3と異なっています。

これらの写真を少し歪んでしまうことは承知の上で、CSSにて強制的に4:3の比率にて表示させたいと考えております。

【.box】や【.box img】にどのような書き方をすれば、レスポンシブを維持したまま、4:3の比率にて表示させることができますでしょうか。

お手数をおかけいたしますが、お知恵を拝借できれば幸いです。

Answer 1

.box {
	width: 20%;
	display: inline-block;
	padding-top: 15%;
	position: relative;
}
.box img {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

padding のパーセント指定は縦方向のpaddingでも横幅の100%が基準になることを利用して、縦paddingに15%を指定すると横の20%に当たる長さの3/4になります。
あとは中の画像を余白無視して範囲いっぱいに広げれば画像サイズが4:3になります。

ちなみに比率を保持する方法もあります。
http://jsdo.it/ksk1015/4EfD

また、リンク先のように頑張らなくても、IMGタグにこだわらない(background-imageでもいい)なら、普通にCSSのcover/containを使用できます。

Answer 2

レスポンシブかつ比率を保ったままレイアウトをする方法は以下に成ります。

.box{
  width:20%;
  background-image:url(imageのパス);
  backgroung-size:cover;
  backgrounr-position:center;
}
.box::before{
  content:'';
  display:block;
  paddint-top:75%（4:3なので横幅を100%とすると75%）;
}

でいかがでしょうか。

なぜpadding-top:○%;にするかというと
paddingの％指定は自分を囲っている包含ブロックの横幅を基準にするからです。
つまり1:1にしたいときはpadding-top:100%;にすると1:1の比率固定レイアウトが可能です。

Answer 3

widthを%で設定している限りCSSのみでheightの比率を固定するのは不可能かと。
jQuery等の利用も検討してください。
縦横比固定サンプル(Codepenリンク)

$(function(){
function getBoxWidth(){
width=$(".box").width();
height=3*width/4;
$(".box").height(height);
}
getBoxWidth();
$(window).resize(function() {
   getBoxWidth();
});
});