Question

我正在尝试将超大尺寸的图像缩放到嵌套div的大小。我已经看过几乎所有建议设置max-width或max-height的Stack问题，但这对我的情况不起作用。请看我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

这是一个有效的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

尝试KeyInfo而不是background-size: cover;

https://jsfiddle.net/pq17nzfh/1/

Answer 3

您也可以使用：

#parent img {
    width: inherit;
}

Answer 4

我为你添加了一堆不同的案例。请记住，object-fit的浏览器支持非常糟糕。如果你想使用它，你需要填充。

#parent2 {
  height: 100vh;
  width: 100%;
}
#parent {
  height: 25%;
  width: 50%;
}
#parent img {
  /* uncomment code below if you want image to respond to parent height */
  /*
  width: auto;
  height: 100%;
  */
  
  /* uncomment code below if you want image to respond to parent width */
  /*
  width: 100%;
  height: auto;
  */
  
  /* uncomment code below if you want image to respond to parent height and width */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

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

Answer 5

使用

最大宽度：100％;

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

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

Answer 6

使用：

#parent img {
    width: inherit;
}

CSS图像大小适合嵌套div

6 个答案: