Question

两个图像都显示两个图像（一个比宽度高，另一个比高度宽）。代码应该使图像在中间（水平和垂直）对齐并填充屏幕的空间，直到图像达到其最大宽度或高度，并且周围应该有72px的填充（在最小值，取决于图像大小和宽高比）

第一个示例适用于所有屏幕尺寸，但第二个示例在纵向屏幕上中断，因为图像显示在底部的画布外。

请参阅第二个示例的屏幕截图：http://dev.driz.co.uk/gallery/ipad1.png（不处理肖像）和http://dev.driz.co.uk/gallery/ipad2.png（处理横向广告）。

查看第一个示例的屏幕截图（可行的）：http://dev.driz.co.uk/gallery/ipad2.png和http://dev.driz.co.uk/gallery/ipad3.png

HTML如下：

<div class="gallery">
    <div class="gallery-background">
        <img src="http://dev.driz.co.uk/gallery/halo.jpg" />
    </div>
</div>

和CSS：

.gallery {
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
}

.gallery-background {
background: none repeat scroll 0 0 #333333;
bottom: 0;
left: 0;
padding: 72px;
position: fixed;
right: 0;
text-align: center;
top: 0;
}

.gallery-background:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;  
    height: 100%;
}

.gallery-background img {
 max-height: 100%;
max-width: 100%;
    vertical-align: middle; 
}

如果图像宽度高于第二个示例，为什么第二个示例会在纵向屏幕上中断？

我该如何解决这个问题？

更新：媒体查询可能是一个选项，如果我可以应用不同的规则，如果屏幕是纵向的，需要稍微不同。

更新2：声明之前很重要，因为它是垂直居中的图像，请参阅此处以获取不带它的示例：http://jsfiddle.net/4EpRv/2/因此删除它不是一个选项，除非我能找到替代。以下证明删除它会导致图像不能垂直居中于中间：http://dev.driz.co.uk/gallery/NotWorking.png

更新3：到目前为止，使用JavaScript是最好的解决方案，因为不使用填充而是集中定位元素我可以处理所有问题：http://dev.driz.co.uk/gallery/2/landscape.php但这可以在纯CSS中完成吗

Answer 1

我用你的问题解决方案重新点了帖子。希望它有所帮助。

<强> CSS

html{
    width:100%;
    height:100%;
    margin:0;
}
body{
    width:100%;
    height:100%;
       margin:0;
}
.gallery{
    position:relative; 
}

.gallery-background {
    width:100%;
    height:100%;
    display:table-cell;
    background-color:#333;
    text-align:center;
    vertical-align:middle;
    padding:0;
    margin:0;
    border:0;
}

.gallery-background img {
    display:block;
    max-width:100%;
    margin:0 auto;
    max-height:100%;
}

<强>的JavaScript

$(function(){
    $('.gallery-background').css('height',$('body').innerHeight())
    $('.gallery-background').css('width',$('body').innerWidth())
    window.onresize = function(event) {
      $('.gallery-background').css('height',$('body').innerHeight())
      $('.gallery-background').css('width',$('body').innerWidth())
    } 
})

<强> HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="gallery">

    <div class="gallery-background">
        <img src="http://dev.driz.co.uk/gallery/halo.jpg" />

    </div>
</div>

我在这里添加了解决方案。我相信没有一些固定的高度几乎是不可能的。我已添加JavaScript以帮助您。

编辑：我已修复了您使用JavaScript时询问的问题，并调整了窗口大小调整。 http://jsfiddle.net/4EpRv/9/

编辑：修正了滚动条http://jsfiddle.net/4EpRv/11/

Answer 2

这是我为类似答案创建的 PEN 。有三种方法可以垂直对齐您的内容。我认为table-cell方法或translate（）方法最适合你。

无论图像或屏幕的宽度或高度如何，都居中对齐图像

2 个答案: