将图像大小调整为窗口大小，保持纵横比/高度或宽度不溢出

Question

我意识到这个问题已经被多次以不同措辞的标题和选项提出，但我还没有找到适合我的东西。

我试图让 img 填充屏幕的大部分（保持其纵横比）而不溢出边缘。 （基本上是firefox浏览器在查看图片时完成的）

我尝试过的大多数都只在一个方向上起作用，即。宽度将调整大小，但最终会溢出高度，而对于另一种方式，使用 CSS 或 JScript 时也是如此。在我的麻烦中还有一个因素是我想将它应用于纵向和横向图像（或多或少我在网站上拥有的任何图像）

这似乎应该使用纯 CSS 工作，但不是（尽管我对所有 CSS 并不完全了解）：

Link to JSFiddle

body, html {
    margin:auto;
    padding:6px;
    height:100%;
    width:100%;

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

还有很多其他的脚本，但是这篇文章有点长。

谁能帮我在屏幕中包含我的图像，使用 JQuery 或 CSS（包含或不包含 DIV）

提前致谢，

Answer 1

现在定义你的html, body height 100%;

像这样

body, html {
     height:100%;
}

Answer 2

---

我的回答：

我最终只是将图像包装在一个 div 中并在 CSS 中设置 div 尺寸：

PURE CSS Resize

不幸的是，这种方法在较旧的浏览器中可能看起来很糟糕，但它至少让我摆脱了泡菜和它的一小部分样式。

希望我能很快找到一些 jQuery 替代品。

body, html {
    width:98%;
    height:98%;
}
.outer {
  position:fixed !important;
  position:absolute;
  margin:auto;
  text-align:center;
  top:10px;
  right:0;
  bottom:10px;
  left:0;
}
img {
max-width:100%;
max-height:100%;    
padding:4px;
background-color:#fff;
}

----
<div class="outer">
<img src="whatever.jpg" />
</div>

Answer 3

试试这个 jQuery 插件：TailorFit 并查看 demo。

您可以在演示中尝试各种选项，以确定这是否适合您。浏览器支持是极端的，因为它只使用 jQuery 和相对定位。

完全公开 - 我是插件的作者。