CSSでアスペクト比を維持する（可能であれば）

Question

高さの画像では少し問題があります。

デモ：あなたは「ロケットラクーン」イメージに行くときに、デモで見ることができるようにhttps://jsfiddle.net/96nzkgfp/

、この1の高さは、他のものを超えています。

.gallery-elements .gallery-image-big { 
    position: relative; 
} 
.gallery-elements .gallery-image-big img { 
    display: block; 
    margin: auto; 
    max-width: 100%; 
    max-height: 600px; 
} 

事は、私がイメージ以上のクラスにheight属性を導入避けたいということですので、私は本当に最大の高さを削除する必要がありますか、私が必要かどうかはわかりませんアスペクト/比率を維持するためのjQuery関数のようなものです。

自然な画像のサイズに関して、画像を高さのサイズに狂わせないようにしようとするどんな助けも、あなたに非常に親切です。

Answer 1

最初のアプローチ：CSSのみ（望ましくない）

.gallery-elements .gallery-image-big { 
    position: relative; 
    height: 230px; /* Setting fixed height will not keep an aspect ratio */ 
    overflow: hidden; /* Hide the images additional height */ 
} 
.gallery-elements .gallery-image-big img { 
    position: absolute; /* Centering images and keeping their aspect ratio */ 
    left: 0; 
    right: 0; 
    top: 0; 
    margin: auto; 
    display: block; 
    max-width: 100%; 
    max-height: 600px; 
} 

第二のアプローチ：jQueryとCSS（信頼性がなく、完璧ではない）

CSS：中央絶対位置で再び画像、および隠されたにオーバーフローを設定します含まれているdivの

.gallery-elements .gallery-image-big { 
    position: relative; 
    overflow: hidden; 
} 
.gallery-elements .gallery-image-big img { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    display: block; 
    margin: auto; 
    max-width: 100%; 
} 

jQueryの：$（ドキュメント）.ready（）関数の最後に、あなたのスクリプトにこれを追加します。

var sliderw = $('.gallery-image-big').width(); 
$('.gallery-image-big').css({ 
    'height': sliderw/1.777 
}); 

これは幅に応じて高さを設定 - の結果であります幅を1.777で割ったものが、今日使用されているアスペクト比16：9になります。

http://jshint.com/でチェックすると、セミコロンがありませんでした。このnew demoには固定されています。

私はこれを「完璧ではない」と説明しています。これは、関数が1回だけ実行されるためです。つまり、ウィンドウのサイズが変更されてもアスペクト比は保持されません。

さらに、親divの幅を1280px、最大幅を100％に設定しました。私はあなたが1280pxより大きい場合を除いて、全幅にしたいと思っていたので、デモでこれらの2つの値を入れ替えました。

Answer 2

max-height: 400px; margin: 0 auto;をお試しください。他の画像の幅が400ピクセルで、自動余白が中央に表示されていることがわかりました。それを垂直方向に集中させたい場合は、これを達成するための方法はたくさんありますが、2016年以降はFlexboxのdisplay: flex; align-items: center;に行くといいと思います。