Javascript Jquery在窗口上调整对象大小并保持纵横比

我正在尝试使用jquery制作一本“翻页书”，并从我购买的一个插件开始
我定制了JS，以便在调整浏览器大小时将书本的大小调整为窗口的100%，并设置最大大小，因为我不希望图像的大小超过其原始大小

综上所述，我一直在努力使图像在调整大小时保持其纵横比。我在网上四处寻找，但找不到任何帮助我解决这个问题的方法<有人对如何实现这一点有什么想法吗？请让我知道，如果你需要更多的信息或澄清

编辑：
book元素的大小由JS调整到图像的最大大小
当书籍的大小调整为小于其最大大小时，书籍的高度和宽度将变为窗口的100%
我需要一些JS使这本书保持它的纵横比

EX-window的大小调整为非常宽（大宽度）但非常短（小高度）
目前，这本书将拉伸并填充非常大的宽度，这会因为高度太小而扭曲图像。

如何缩小宽度比例以补偿较小的高度（反之亦然）？
提前感谢大家

---

您的问题中并没有足够的技术信息能够给您一个好的答案，但这通常是一个可以使用CSS解决的问题。它不需要任何JS/jQuery

如果设置如下内容，标记自然会保持图像的纵横比：

img {
    width: 100%;
    height: auto;
}

或者，您可以将图像设置为背景图像并使用CSS属性

.image {
    background-size: contain;
}

要确保图像使用了最大的可用宽度和高度。

请查看以下代码：

或者，您也可以使用css：

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
</div>

---

如我所见，您正在使用JavaScript调整图像的容器div的大小。因此，您可以设置以下CSS以使图像始终适合该div并保持其纵横比

img {
    max-height:100%;
    max-width:100%;
}

---

这是一本书

Fiddle：在Fiddle中调整预览窗口的大小，以查看它是否丢失纵横比您建议的css不适用于我：（我已对我的问题进行了编辑。请查看这是否有助于您更好地理解我的问题。这对我不起作用。请查看我编辑的问题。谢谢您的回答。我看到了您在网上搜索时粘贴的代码。这似乎对我不起作用，我遇到了“ratio=maxWidth/width”行的问题

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
    style="max-height: 100%; max-width: 100%">
</div>

img {
    max-height:100%;
    max-width:100%;
}