将图片调整大小以适应视口大小

Question

如何使图片按比例缩放并保持在容器内，如果图片大于容器，则缩小，但如果图片小于容器，则不进行缩放。

如果图片宽度大于容器宽度，则应使用以下代码。

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

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

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

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

img_w = parseInt($("#img").css("width"));
screen_w = parseInt($(window).width());

img_w = parseInt($("#img").css("width"));
screen_w = parseInt($(window).width());

if (img_w > screen_w) {
    $("#img").css("width", screen_w + "px"); // like 100%;
    $("#img").css("height", "auto");
} else {
    $("#img").css("width", "auto");
    $("#img").css("height", "100%");
}

- Florin Pop

---

您想保留纵横比吗？ - steveax

@steveax 是的，这正是我想要的。 - Florin Pop

使用width:100vw和height:100vh怎么样？ 参考链接 - Eric Martinez

我已经编辑了你的问题，以澄清、简化和概括为目的，使其更有用于未来的观众。请让我知道是否偏离了您的问题意图。此外，您甚至可以放弃JavaScript部分和相关标签，因为它们已不再相关。 - user4639281

Answer 1

以下CSS解决了问题：

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

- Florin Pop

---

你应该在问题中放置原始代码，因为现在你已经在提供的链接中解决了问题。未来的用户将看不到你用这个解决了什么问题。 - AlphaG33k

顺便说一句，不错的干净解决方案。 - AlphaG33k

点击问题中的链接后，无论如何，都不会再出现任何问题。我知道，因为我就是那个用户。 - AlphaG33k

不错的解决方案，但需要更好的解释，可能需要一个演示。 - user4639281

Answer 2

我尝试了你的代码，你可以在这里看到结果：http://jsfiddle.net/g6rL3L5h/ 我认为现在它已经可以正常工作了。

我只是在你的CSS中删除了'html'。

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

你需要这个吗？

- Gabriele Carbonai