8

レスポンシブサイトにflexsliderを設定しています。私が作成しているスライダーは、横向きと縦向きの両方の画像を撮影します。smoothHeight: true画像に合わせて高さが調整されるように設定しました。

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

cssでmax-height: 750px、高さの問題を解決する設定を試しましたが、flexsliderは、幅750ピクセル、高さ750ピクセルに合うように画像を拡大します。

アスペクト比を維持し、それに基づいて画像の幅を調整するためにフレックススライダーを取得する方法を知っている人はいmax-heightますか？ポートレート画像の高さは750ピクセルになりますが、アスペクト比は維持されます。

4

2 に答える 2

2

I Don`t understand about which functionality of Flexslider you talking - on zooming image or that thumbnails in scrolled toolbar? Whatever, there is one solution for both situations:

<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>

Solution for crop or scale image within container http://jsfiddle.net/iegik/ZzXru/

Related question: How to align cropped element horizontally?

于 2012-11-02T19:49:14.370 に答える
0

The image should maintain its ratio by default, unless you had a width: 100%; set too, in which case you should change this to use width: auto, then your max-height: 750px will take precedent

于 2016-08-13T15:27:38.193 に答える