画像の縦幅の制限画像/縦横比の保持

Question

レスキューサイトでフレックススライダを設定しました。私が作成しているスライダは、風景画像とポートレート画像の両方を使用します。私はsmoothHeight: trueを設定して、画像に合わせて高さを調整します。

最大のメディアクエリでは、flexsliderコンテナの幅は750pxです。これは横向きの画像では問題ありませんが、縦向きの画像は大きくなりすぎます。ポートレート画像の幅は、幅750pxのコンテナと同じサイズに設定されているため、高さは少なくとも2倍であるため、スクロールせずに画像全体を表示することはできません。

私は、高さの問題を解決するmax-height: 750pxを設定しようとしましたが、flexsliderは750px幅に合わせて画像を広げます。

flexsliderにアスペクト比を保存して、max-heightに基づいて画像の幅を調整する方法は誰も知っていますか？その結果、ポートレート画像は750pxになりますが、縦横比は維持されます。

Answer 1

私はあなたが話しているFlexsliderのどの機能について - 画像をズームしたり、スクロールしたツールバーのサムネイルを理解していないのですか？ が何であれ、両方の状況のた​​めの1つの解決策があります：

<style> 
figure { 
    outline: green solid 1px; 
    padding: 2px; 
} 
img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: relative; 

    outline: red solid 1px; 
    opacity: .5; 
} 
.scale img{ 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    vertical-align: middle; 
} 
.toheight img{ 
    max-width: none; 
} 
</style> 
<figure class="scale toheight" width="200" height="200"> 
    <img src="http://placekitten.com/250/300"/> 
</figure> 

コンテナ内の作物やスケール画像のためのソリューションhttp://jsfiddle.net/iegik/ZzXru/

関連質問：How to align cropped element horizontally?

Answer 2

は画像があなたの場合を除き、デフォルトではその比率を維持すべきですwidth: 100%;も設定してください。その場合は、を使用するように変更してから、max-height: 750pxを先に使用します。