Question

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

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

我试过的大多数只能在一个方向上工作，即。宽度将调整大小，但最终会溢出高度，而对于其他方式，无论是使用CSS还是JScript。在我的麻烦中扮演一个因素是，我想对肖像和风景图像（或多或少任何我在网站上的图像）aplly这个）

这似乎应该可以使用纯CSS，但不是（虽然我并不完全了解所有CSS）：

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

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

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

任何人都可以帮助我在屏幕中包含我的图像，使用JQuery或CSS（在DIV内部或不包含DIV）

提前致谢，

Answer 1

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

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

完全披露 - 我是该插件的作者。

Answer 2

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

就像这样

body, html {
     height:100%;
}

Answer 3

我的回答：

我最终只是将图像包装在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>

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

3 个答案: