0

ブラウザの変更サイズでimgグループのサイズを自動変更する方法は?

私はCSSでほぼ完成させていますが、今はoverflow:hiddenを設定できません.5番目または6番目..画像を非表示にします。


(img from php)
(jQueryプラグインscrolling-carouselを接続します。)

時間を割いていただきありがとうございます。


ここに私のhttp://jsfiddle.net/uSHbc/1/
HTMLがあります

<div class="conimgwrap2">
    <div class="conimgwrap">
        <div class="conimg">

            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>                
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>                
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>
            <div>
                <img src="http://fancyapps.com/fancybox/demo/2_s.jpg">
            </div>

        </div>
    </div>
</div>​

CSS

.conimgwrap2{
    position: relative;
    left: 50%;
    width: 50%;
}
.conimgwrap{
    position: absolute;
    width: 25%;
    height: 25%;
}

.conimg{
    max-width: 100%;
    max-height: 100%;
    background-color: yellow;
    display: inline;
    white-space: nowrap;
}

.conimg div{
    display: inline;
    white-space: nowrap;
}
.conimg img{
    max-width: 100%;
    max-height: 100%;
}​
4

3 に答える 3

0

内側-

表示：インライン;
最大幅：_％;
最大高さ：100％;

アウター-

空白：nowrap;
と位置セットはhttp://www.alistapart.com/articles/conflictingabsolutepositionsから方法を学びます

于 2012-11-07T19:25:08.373 に答える
0

私はそれをこのようにします：

.conimg div{
    display: inline-block;
    max-width: 20%; /* (100% / the number of divs) */ 
}
.conimg img{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 hack */
}​

これにより、画像コンテナの親の内部に等間隔のdiv（この例では5つの要素）が作成され、ウィンドウのサイズが変更されると、画像とそのコンテナの両方が拡大/縮小されます。

デモ
http://jsfiddle.net/buqqn/

于 2012-11-07T19:23:34.947 に答える
0

「cssでほぼ完成しましたが、overflow:hiddenを設定できません。5番目または6番目..画像を非表示にします。」

ただし、ブラウザの変更サイズで画像のサイズを変更する場合は、次の css を使用して実行できます。

.conimg img{ 最大幅: 100%; 高さ: 自動;} </p>

ありがとうございました。

于 2012-11-06T10:22:14.033 に答える