1

我有一个提供不同尺寸的“随机”图片的网站，如果不是大多数图片恰好不适合浏览器，所以我想知道一种方法来调整它的大小以适应浏览器视图而不滚动，那么为什么不堆栈溢出的家伙！

显然保持比例，我尝试了https://github.com/gutierrezalex/photo-resize/但没有按预期工作。
所以它是一个带有一些文本的 html 页面，中间的图像和下面的一些其他文本。
我想要的只是滚动无法使用，因为图像应该缩小到足以这样做。

4

5 回答 5

12

你不需要任何 JavaScript 或 hack 来实现这种图像缩放——简单的 CSS 和 HTML 就可以正常工作。（顺便说一句，iPad 和 iPhone 上也有。）

您可以只img使用 CSS 属性放置您的，height:100%;它将具有 DOM 树中父节点的高度。确保该节点（通常是 a div）将正确定位在浏览器窗口中。

尝试这样的事情：

<div style="position:fixed; height: 100%; width: 100%; top:0;left 0;">
  <img src='whatever.png' style="height: 100%" />
</div>

查看此页面作为演示：andrehelbig.fotograf.de。在这里，背景图像将始终按比例缩放以填充整个浏览器窗口（不要被 JS 滚动激怒）。

希望能给一点帮助。

于 2012-10-14T17:32:24.033 回答
1

试试这个：

div {
  width:80vw;
  height:80vh;
  background:#ccc;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
img {
  max-width:100%;
  height:auto;
  max-height:100%;
  }
<div>
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg">
</div>

于 2017-08-03T07:39:15.220 回答
0

老问题，但对于未来的 googler，我编写了一个 jQuery 插件，它能够通过很多选项自动调整图像大小：

https://github.com/GestiXi/image-scale

于 2014-02-26T18:22:47.303 回答
0

我有一个简单的解决方案。

在图像中添加类，然后使用 jquery 自动调整图像大小。这里是代码：

<img src="" id="imgFitWindowResize">

现在使用 jquery 在客户端调整浏览器大小时初始化自动宽度：这里的代码：

<script type="text/javascript" language="JavaScript">
  function set_body_width() { // set body height = window height
    var wh = $(window).width();
    $(".imgFitWindowResize").width(wh);
  }
  $(document).ready(function() {
    set_body_width();
    $(window).bind('resize', function() { set_body_width(); });
  });
</script>

我试试这个代码它的工作:)

于 2014-12-05T01:06:24.627 回答
-1

你能试试这个代码吗？将 image src 替换为您的图像源。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

$(document).ready(function() {
var h = $(window).height();
var w = $(window).width();
document.getElementById('img_canvas').style.height= h +'px';

});

</script>
</head>
<body>

<img id="img_canvas" src="images.jpg" style="width:100%;height:auto;">
</body>
</html>
于 2014-05-24T07:52:40.083 回答