0

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

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

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

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

链接到 JSFiddle

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

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

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

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

提前致谢，

4

3 回答 3

1

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

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

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

于 2013-04-18T16:00:55.183 回答
0

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

像这样

body, html {
     height:100%;
}
于 2013-04-11T06:14:32.300 回答
0

我的答案：

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

纯 CSS 调整大小

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

希望我能很快找到一些 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>
于 2013-04-15T04:29:09.880 回答