图片中心窗口

从我的老问题（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

图片中心窗口

回答

相关问题