Question

我有一个网站，提供不同尺寸的“随机”图片，有些（如果不是大多数图片）恰好不适合浏览器，所以我想知道一种方法来调整它以适应浏览器视图而不滚动，所以为什么不是Stack Overflow的家伙呢？

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

Answer 1

您不需要任何JavaScript或黑客来实现这种图像缩放 - 简单的CSS和HTML就可以正常工作。（BTW也在iPad和iPhone上。）

您可以使用CSS属性img放置height:100%;，它将具有DOM树中父节点的高度。确保该节点（通常为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滚动而烦恼）。

希望能给予一点帮助。

Answer 2

试试这个：

＆＃13;

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%;
  }

＆＃13;

<div>
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg">
</div>

＆＃13;

Answer 3

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

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

Answer 4

你能试试这段代码吗？用图像源替换图像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>

Answer 5

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

在图像中添加类，然后使用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>

我试试这段代码它的工作：）

自动调整图像大小以适合浏览器

5 个答案: