圖片中心窗口

從我的老問題（Center and hide image, fitting div size）圖片中心窗口

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

一些progrees我有什麼期望？期望以窗口爲中心的圖像。如果分辨率低於圖像，圖像的左側和右側將被隱藏。

enter image description here

對不起我的英語水平，並感謝！

來源

2012-04-10 Gabriel Santos

我想看看這個人的第三個例子。 http://stackoverflow.com/a/10093063/961847 – mikevoermans 2012-04-10 18:52:59

這解決了我的問題，除了幻燈片，需要'＃wrapper .inner'絕對定位幻燈片。 – 2012-04-10 18:54:07

我想我找到了解決方案！ – jacktheripper 2012-04-10 19:10:28

這可以使用簡單的黑客來實現。您可以將div對齊到具有1px寬度的頁面中心，然後將圖像放在該div中。然後將該圖像的左側邊緣設置爲圖像寬度的一半。

看到這個example（我已經離開了中央div的背景色爲紅色，所以你可以看到）

來源

2012-04-10 19:10:07 jacktheripper

謝謝你的樣品，明天再試。 – 2012-04-11 01:10:18

工作很好，謝謝！ – 2012-04-11 12:13:01

圖片中心窗口

回答

相關問題