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

Question

我有以下示例:http://jsfiddle.net/4EpRv/

另一个在这里:http://jsfiddle.net/4EpRv/1/

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

第一个示例在所有屏幕尺寸上都运行良好，但第二个示例在纵向屏幕上出现问题，因为图像出现在 Canvas 底部之外。

查看第二个示例的屏幕截图: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::before 声明很重要，因为它使图像垂直居中，请参见此处的示例: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/