Question

我在这里进行了以下测试：http://dev.driz.co.uk/gallery/index2.php

这个想法是图像应该在gallery div中居中，并且在它周围有72px的填充。如果图像小于屏幕，则它将居中（此部分有效），但是如果图像大于屏幕，则应根据最佳比例调整自身大小以适应。

这是通过将图像max-height和max-width设置为100％来实现的，因此图像受其容器元素的约束。在这种情况下，容器是两个伪造的表格，用CSS将它放在页面上。

实际发生的是图像只是忽略max-height属性而只应用宽度约束，因此它出现在页面外。

关于问题的任何想法？在过去，我刚刚使用JavaScript将图像放在中间位置，但更喜欢在示例中使用CSS。

完整代码如下：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Center</title>
        <style type="text/css">

            *
            {
                margin: 0;
                padding: 0;
                border; 0;
            }

            html,body
            {
                height: 100%;
                width: 100%;
            }

            body
            {
                overflow: hidden;
            }

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

            .gallery-background
            {
                background: #333333;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                position: fixed;
                padding: 72px;
            }

            .gallery-outer
            {
                display: table;
                width: 100%;
                height: 100%;
                border-collapse: collapse;
                table-layout:fixed;
            }
                .gallery-inner
                {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                    width: 100%;
                    height: 100%;
                }

            .gallery-image
            {
                position: relative;

            }

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


            }

        </style>
    </head>
    <body class="default">

        <div class="gallery">
            <div class="gallery-background">

                <div class="gallery-outer">
                    <div class="gallery-inner">

                        <div class="gallery-image">
                            <img src="EmpireState.jpg">
                        </div>

                    </div>
                </div>

            </div>
        </div>      

    </body>
</html>

Answer 1

当您为图像指定最大高度为100％时，它会查找其直接父标记的高度。如果它没有高度或无论如何都受约束，那么它就无法将规则应用于图像的高度。看看你的HTML / CSS，我会把它剥离并简化它：

<div class="gallery">
    <div class="gallery-background">
        <img src="EmpireState.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; 
}

希望这应该排除

将表格高度和图像限制为容器的高度

1 个答案: