Question

我需要在窗口的中心（水平和垂直方向）显示一个图像（可能是它附近的一些控件），而当它变得更大时会缩小到屏幕高度（我拥有的所有图像都是垂直的）所以我不在乎他们的宽度）。必须使用背景隐藏基础内容。代码应该在从Internet Explorer 8开始的浏览器中工作。

除了后者之外，我设法实现了一切 - 缩小到屏幕高度，我遇到了问题。

以下是我尝试实现它的方法（在下面的结果代码中加入子句）：

我把所有东西放在一个固定位置的块中，并将其设置为100％的宽度和高度 - 以填充整个窗口区域。成功的。
我使用表格垂直居中图像，因此我将它的高度设置为100％。成功的。
在单元格内放置图像。

3A。当它的高度小于屏幕尺寸时，图像垂直位于中心。成功的。

3B。我将图像的max-height设置为100％，使其适合屏幕。 Unsucsessful！图像将窗口推向它的实际高度（令人惊讶的是IE除外）。

是否有可能解决所描述的任务以及我做错了什么？

（我的代码：）

view at jsfiddle

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="photoshow">
        <table>
            <tr>
                <td>
                    <img src="http://s14.postimg.org/e9kwvq2m9/1031_1.jpg">
                </td>
            </tr>
        </table>
    </div>

</body>
</html>

CSS：

.photoshow { /* the containing block */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: pink; /* hiding the underlying content */
    }

    .photoshow table {
        height: 100%;
        margin-left: auto; margin-right: auto; /* to center horizontally */
        }

        .photoshow td {
            height: 100%;
            vertical-align: middle;
            background: yellow; /* just for visual indication */
            }

            .photoshow img { 
                max-height: 100%;
                }

Answer 1

DEMO

.photoshow .big {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    height:100%;
    max-height:300px;
}

<img/> max-height不起作用

1 个答案: