2

私はこのチュートリアルに忠実に従っていました: http://www.icodeya.com/2012/08/grails-creating-image-gallery-feat.html on how to add a image gallery feature in grails. それはうまく機能しますが、メインの（大きな）画像の高さを調整したかったのです。うまくいきましたが、デフォルトの幅を超える画像をアップロードすると、レイアウト全体が台無しになります。同様に、画像の一部がレイアウトの残りの部分からはみ出します。それはCSSの問題だと思います..そして私はCSSが苦手です。コードは以下です。ここで良いデモを見ることができます: http://www.pikachoose.com/幅を 100% に変更すると、一貫性がなくなるのは高さであることに注意してください。:(

*画像がない場合はアップロードして、自分の目で確かめてください。

誰か私を助けたい？:D

無料のクッキーを提供しています。:) :)

@charset "UTF-8";
/* Just for the example. Fee free to delete these three lines */
body{font-family:Helvetica, sans-serif;}
a{color:white;}
.pikachoose {width: 800px; margin: 20px auto 20px auto;}

/* Style the thumbnails */
.pika-thumbs{ padding: 0 16px; height: 75px; margin-top: 10px; width: 100%;}
    .pika-thumbs li{ width: 144px; height:74px; margin: 5px; padding: 2px; overflow: hidden;
        float: left; list-style-type: none; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
    .pika-thumbs li:last {margin: 0;}
    .pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, .pika-textnav {width: 800px;}
.pika-stage {overflow:hidden; position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:400px;}
.pika-stage img{height:100%;}
4

1 に答える 1

4

デモを見ると、メイン画像のステージは 800px のように見えるので、メイン ステージに表示される画像の最大幅を追加するだけです。

.pika-stage img { 高さ: 100%; 最大幅: 800px; /* メインステージと同じ幅なので画像が伸びません */ }

于 2012-09-25T15:05:11.610 に答える