Javascript 调整图像大小以保持在视口中

如果图像大于容器，如何调整图像大小并保持纵横比以保持在容器内，但如果图像小于容器，如何不调整图像大小

如果图像的宽度大于容器的宽度，则应应用以下代码

img{
宽度：100%；
高度：自动；
}

如果图像的宽度小于容器的宽度，则应应用以下代码

img{
宽度：自动；
身高：100%；
}

我尝试使用以下代码，但当图像宽度大于容器宽度时，会发生一些奇怪的事情

img_w=parseInt（$（“#img”）.css（“宽度”）；
screen_w=parseInt（$（window.width（））；
img_w=parseInt（$（“#img”）.css（“宽度”）；
screen_w=parseInt（$（window.width（））；
如果（图像>屏幕）{
$（“#img”）.css（“宽度”，屏幕w+“px”）；//比如100%；
$（“#img”）.css（“高度”、“自动”）；
}否则{
$（“#img”）.css（“宽度”、“自动”）；
$（“#img”）.css（“高度”、“100%”）；
}

使用以下CSS解决问题：

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

---

我尝试了您的代码，您可以在这里看到结果： 我想现在一切都好了

我只是删除了css中的“html”

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
  }

---

你需要这个吗？

你想保留纵横比吗？@steveax是的，这是我想要的。使用

宽度：100vw

和

高度：100vh

怎么样？我对你的问题进行了编辑，以澄清、简化和概括，使其对未来的观众更有用。如果我偏离了你问题的意图，请告诉我。此外，您甚至可以去掉JavaScript部分和与JavaScript相关的标记，因为它们不再相关了。未来的用户不会看到你用这个解决了什么问题。但是很好的干净的解决方案。另外，当你点击问题中的链接时，就看不到更多的问题了，我知道我就是那个用户。很好的解决方案，但这可能需要更好的解释，并且可能是