Question

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
    <head><link href="test.css" rel="stylesheet"></head>
    <body>
        <div class="outer">
            <div class="inner">
                <img src="test.png">
            </div>
        </div>
    </body>
</html>

这是CSS：

.outer {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
}

.inner {
    width: auto;
    margin: auto;
}

.inner > img {
    width: auto;
    max-width: 100%;
}

这是我在Bootstrap的modal.js中使用的代码的简化，用于在点击缩略图后显示图像。

我想要的是以反应的方式将图像置于视口中心 - 也就是说，除非视口小于其中一个尺寸，否则图像将以其真实尺寸显示，在这种情况下，图像应相应调整大小。

outer div往往具有视口的确切尺寸 - 效果很好。

图像被赋予width: auto; max-width: 100%;，它对视口的宽度非常敏感，但不响应视口的高度。添加max-height: 100%;无效。

不幸的是，除非给定特定的inner，否则width div会抓住视口左侧。

如果我将display: table添加到.inner，则div会居中，但不再响应视口宽度的变化。

那么，我如何让inner div居中并响应视口的宽度和高度，从而不会裁剪或改变图像的纵横比或将其拉伸超出原始尺寸图像？

仅使用CSS和HTML（以及Bootstrap）这是不可能的，还是需要一些自定义JS？我不知道JS能够自信地对此进行编码，这就是为什么我希望有一些很好的CSS技巧可以允许这种矛盾的行为以视口大小为条件。

标记Twitter的Bootstrap，因为我将在Bootstrap的上下文中使用它，所以任何使用Bootstraps JS插件的解决方案都是受欢迎的。

编辑：为了更清楚，我需要将inner不仅仅放在inner内的图像中。

Answer 1

像这样更改代码

.outer {
        position: fixed;
        top: 0; right: 0; bottom: 0; left: 0;
        text-align:center;
    }

http://jsbin.com/puyabore/1/edit

如何将具有未指定宽度的div居中？

1 个答案: