根据内部图像动态居中和调整容器 div 的大小答案

【问题标题】：Center and resize a container div dynamically based on image inside根据内部图像动态居中和调整容器 div 的大小
【发布时间】：2023-03-10 08:04:01
【问题描述】：

我需要一个容器 div，里面有一个图像。

容器 div 必须水平居中，并且只占用与其内容（图像）一样多的空间。

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

我尝试通过 display: inline-block; 来实现这一点。 - 水平调整窗口大小时有效，但垂直调整大小时无效。

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

编辑：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%;
}

【问题讨论】：

当你给html,body标签添加一个高度属性时，最好是：jsfiddle.net/webtiki/J86L9/1
至少在 chrome 中没有帮助，调整窗口大小后容器仍然无法适应图像大小
是的，但是现在图像会根据高度调整大小。
以前已经工作过了。它的容器（标有红色边框）没有正确调整大小。
@alberto2000 你是什么意思它没有正确调整大小..？在 web-tiki 的小提琴中，它正在正确调整大小。定义调整大小

标签： html css dom

【解决方案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;
}

【讨论】：

这不会适应高度，它不应该比窗口大......反正我用JS解决了它......不要认为它可能没有。
你是对的，答案不完整。我添加了一个更完整的 Fiddle，以供将来对该问题的任何点击。

【解决方案2】：

这对你有用吗？

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

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

我知道边框不会完全跟踪图像，但如果您想要这种行为，您应该只在图像上设置边框而不是容器 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;
}

【讨论】：