html - CSS 图像大小以适合嵌套的 div

Question

我正在尝试获取超大图像以缩放到嵌套 div 的大小。我查看了几乎所有建议设置最大宽度或最大高度的堆栈问题，但这对我的情况不起作用。请看我的代码:

#parent2 {
  height: 100%;
  width: 100%;
}
#parent {
  height: 25%;
  width: 50%;
}
#parent img {
  max-height: 100%;
}

<div id="parent2">
  <div id="parent">
    <img src="http://lorempixel.com/1000/1000">
  </div>
</div>

Answer 1

您应该使用 max-width 而不是 max-height。

这是一个工作示例:

#parent2 {
    height: 100%;
    width: 100%;
}
#parent {
    height: 25%;
    width: 50%;
}
#parent img {
    max-width: 100%;
}

<div id="parent2">
  <div id="parent">
      <img src="http://lorempixel.com/1000/1000">
  </div>
</div>

这是你的 jsfiddle 的分支:
https://jsfiddle.net/358vt90e/