0

私の古い質問からいくつかの同意があります（画像を中央に配置して非表示にし、divサイズに合わせます）

#slideshow {
    height: 550px;
    width: 1400px;
    overflow: hidden;
}
.slide {
    // NEED TO BE ABSOLUTE POSITIONED. If I comment the line, all work as expected, but slideshow don´t slide.
    position: absolute;
}
.slide img {
    height: 550px;
    left: 50% !important;
    margin-left: -700px;
    position: absolute;
}


<div id="slideshow">
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div>
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div>
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div>
    <div class="slide"><img src="http://di20studios.com/2012/royalpack/images/banners/af_banner_rp_01.jpg" /></div>
</div>

私は何を期待しますか？ウィンドウを中心とした画像を期待してください。解像度が画像より低い場合、画像の左右が非表示になります。

ここに画像の説明を入力してください

私の英語をごめんなさい、そしてありがとう！

4

1 に答える 1

2

これは、単純なハックを使用して実現できます。divを1px幅のページの中央に揃えてから、そのdivに画像を配置できます。次に、その画像の左マージンを画像の幅の半分に設定します。

この例を参照してください（中央のdivの背景色を赤のままにして、表示できるようにしました）

于 2012-04-10T19:10:07.837 に答える