在HTML中将图像拟合到div容器

Question

我想要一个图像适合div容器。即使图像小于div或图像大于div，它也应该适合。我尝试了一些选项，比如将max-width和height设置为100％，但它不起作用。

#content {
  width: 351px;
  height: 250px;
  border: 1px solid black;
}
#content img {
  max-width: 100%;
  max-height: 100%;
}

<div id="content">
  <img src="https://dumkhum.com/wp-content/uploads/2016/10/SHIVAAY_ISHQAA_1.jpg">
</div>

以下是我的代码链接：https://jsfiddle.net/w8r0g921/

Answer 1

#content {
  width:351px;
  height:250px;
  border:1px solid black;
}
#content img {
  width:100%;
  height:100%;
}

Answer 2

HTML

{{1}}

CSS

{{1}}

让图像成为div的背景，然后使用background-position属性控制它的外观。希望这会对你有所帮助。