Question

我需要一个带有图像的容器div。

容器div必须水平居中并且它必须占用与其内容（图像）相同的空间。

里面的图像必须根据窗口大小调整大小。

我试图用display来实现这个目的：inline-block; - 水平调整窗口大小时有效，但垂直调整大小时无效。

查看这个小提琴http://jsfiddle.net/J86L9 - 水平和垂直调整窗口大小以查看＆＃34;错误＆＃34;。

编辑：Safari做得很好，而Chrome没有调整容器的大小，但图像和Firefox根本没有做任何事情。我认为这可能与max-height属性有关吗？

#wrap {
    text-align: center;
}

#container {
    display: inline-block;
    border: 1px solid red;
    max-width: 75%;
    max-height: 75%;
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

Answer 1

以表格的形式显示容器是最简单的方法。

**这会有用吗？ http://jsfiddle.net/J86L9/39/

body, html {margin:0; padding:0; width:100%; height:100%;}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  outline: 0;
}
#wrap {
    display: table; width:100%; height:100%; border:1px solid red;
}
#container {
    display: table-cell; margin:0 auto; background:#ccc; text-align:center; vertical-align:middle;
}

img {
    width: 50%; max-height:90%; display:inline-block;
}

Answer 2

这对你有用吗？

http://jsfiddle.net/J86L9/42/

“秘密”是在div而不是img标签上使用背景图像。这可能对你有效，正如你在评论中提到的那样，你想要其他元素以及容器内的图像。

我知道边框没有完全跟踪图像，但是如果你想要这种行为，你应该只在图像上设置边框而不是容器div。

CSS：

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

.wrapper {
    width: 50%;
    height: 100%;
    position: relative;
}
.wrapper:after {
    padding-top: 150%; /*this specifies the aspect ratio*/
    display: block;
    content: '';
}

.main {
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
    background: url(http://placekitten.com/g/400/600) no-repeat center center;
    background-size: contain;
    border: 1px solid red;
}

根据里面的图像动态居中并调整容器div的大小

2 个答案: