div内的图像缩放失败 - 背景不跟随

Question

我目前正在尝试将图像放入div容器中，但它不起作用。我的页面上有一个复杂的div树，看起来像这样：

<div id="a">
    <div id="b">
        <div id="c">
            <div id="d">
                <img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
            </div>
        </div>
    </div>
</div>

以下CSS：

#a {
    height: 300px;
    background-color: red;
    position: relative;
    text-align: center;
}

#b {
    height: 100%;
    width: 100%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 20px;
}

#c {
    width: auto;
    height: auto;
    display: inline-block;
    max-height: 100%;
    background-color: black;
    padding: 20px;
}

#d {
    width: 400px;
    background-color:yellow;
    max-height: inherit;
}

img {
    max-width: 100%;
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 80px);
    margin: auto;
}

我希望将图像装入蓝色容器中。它还应该注意给定的div容器。目前，黑色的填充物直到最后加上容器的填充物。

Demo Fiddle

我希望有人能够提供帮助。

Answer 1

这是一个适合您的新概念。 box-sizing: border-box自动将填充包含在百分比宽度和高度中。该图片不再需要position: absolute。

所有内部div的宽度和高度由#a容器及其填充的宽度控制。

新演示

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#a {
  background-color: red;
  position: relative;
  text-align: center;
  width: 400px;
  padding: 20px;
}
#b {
  background: blue;
  padding: 20px;
}
#c {
  background-color: black;
  padding: 20px;
}
#d {
  background-color: yellow;
  padding: 20px;
}
img {
 width: 100%;
 display: block; /* remove inline gap */
}

<div id="a">
  <div id="b">
    <div id="c">
      <div id="d">
        <img src="http://public.media.smithsonianmag.com/legacy_blog/npg_portraits_nicholson_jack_2002.jpg" />
      </div>
    </div>
  </div>
</div>

旧答案

• 删除width: auto; height: auto;上的padding: 20px和#c

• 将height: 100%放在#c

上

这种情况发生的原因 - height: 100%的{​​{1}}受#c上的填充影响，因此任何额外的填充都会炸掉高度。

演示

#b

#a {
    height: 300px;
    background-color: red;
    position: relative;
    text-align: center;
}

#b {
    height: 100%;
    width: 100%;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 20px;
}

#c {
    height: 100%;
    display: inline-block;
    background-color: black;
}

#d {
    width: 400px;
    background-color:yellow;
    max-height: 100%;
}

img {
    max-width: 100%;
    opacity: 0.7;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% - 80px);
    margin: auto;
}

Answer 2

在这里尝试给“#d”一个高度

#d > img {
width: 100%;
height: 100%;
text-align:center;
}