とあるサイトを構築していたら一部だけちょっと複雑な構造になってしまい、それが原因なのか、何をうやってもcssでは高さが取れずに画像が潰れてしまっていた。仕方がないので、jQueryを使って画面サイズが変わっても縦横比を維持して拡大縮小するように対応させた。

$(function(){
function adjust(){
var getImageWidth = $('.neko-img-wrapper img').width();//1
var getImageHeight = $('.neko-img-wrapper img').height();//2
var ratio = getImageHeight / getImageWidth;//3
var w = $('neko-img-wrapper').width();//4
var h = w * raito;//5
$('.neko-img-wrapper').css('height', h);//6
}
adjust();
$(window).on('load resize', function(){
adjust();
})
});

一応解説のようなもの

• 1.画像のオリジナルサイズ横をそれぞれ取得する。
• 2.画像のオリジナルサイズ縦をそれぞれ取得する。
• 3.オリジナル画像の縦横比を算出する。
• 4.web表示上の画像サイズ横幅を取得する。
• 5.web表示上の画像サイズ横幅の値にオリジナル画像の縦横比をかけて縦幅を算出する。
• 6.算出した値をweb表示上の画像サイズ縦幅としてcssで指定する。

スマートじゃないとは思うけど、意図した通りには動いているのでまぁよしとするか・・・。