Html 将图像适配到父div'；s码

我制作了一个div（div1），它等于浏览器窗口的大小。然后我在父div（div1）中创建了另一个div（div2）。然后我在第二个div（div2）中放置了一个图像。我的浏览器窗口大小为1360X638，图像大小为1600*1200

我希望图像能够根据父div（div1）的大小进行调整。因此，图像（大于窗口大小）必须适合第二个div（div2，等于窗口大小），并且此图像将完全适合div的大小（因此，显示屏中没有任何滚动或裁剪图像）

我已经找了一段时间了。我找到的解决方案是将最大高度和宽度设置为100%。是我干的

我写了这部分：

<div style="max-width: 100%; max-height: 100%; background-color: red; margin-right: 0px; padding: 2 2 2 2; overflow:visible;">
    <div style="max-height: 100%; max-width: 100%;">
        <img style="max-width: 100%; max-height: 100%; overflow:visible;" src="1.jpg" />
    </div>
</div>

输出如下：

你可以看到右边有一个卷轴。我不希望出现这种情况。

jQuery解决方案-概念验证 假设您有以下HTML：

<div class="container">
    <img src="http://placehold.it/1600x1200" />
</div>

根据视图端口的纵横比，使用以下jQuery方法选择正确的CSS规则：

函数resizeImg（）{
var thisImg=$（'.container'）；
var refH=此img.height（）；
var refW=thisImg.width（）；
变量refRatio=refW/refH；
var imgH=此img.儿童（“img”）.身高（）；
var imgW=此img.children（“img”）.width（）；
如果（（imgW/imgH）>refRatio）{
此img.addClass（“肖像”）；
此img.removeClass（“景观”）；
}否则{
此img.addClass（“景观”）；
此img.removeClass（“肖像”）；
}
}
$（文档）.ready（resizeImg（））
$（窗口）。调整大小（函数（）{
resizeImg（）；
});

演示小提琴：

这可能不是全部答案，但可能是一个起点

参考
我之前研究过一个相关的问题，这可能很有趣：

---

这看起来像一个dup:@hendr1x，该链接没有任何可接受的答案。您是否通过“背景尺寸：封面”进行了检查；请看下面的示例，这里有一个基本问题。图像的纵横比可能与视口（浏览器窗口）的纵横比不同。在某些情况下，如果视口比图像高，则需要使用“最大宽度”；如果视口比图像宽，则需要使用“最大高度”。您需要一些JavaScript/jQuery来帮助您在调整窗口大小时设置正确的样式。@MarcAudet:谢谢！你的回答很有帮助。您已解锁一个新的视角。：）