自动调整大小的图像，以适应浏览器

我有一个网站，提供不同维度的“随机”图片，如果不是大多数图片碰巧不适合浏览器，所以我想知道一种方法来调整它的大小适合浏览器视图而不滚动，那么为什么不是Stack Overflow的家伙！自动调整大小的图像，以适应浏览器

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

来源

2012-10-14 user139944

你确定https://github.com/gutierrezalex/photo-resize/不起作用吗？它适用于我： http://jsfiddle.net/FHq4y/ –

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

您可以将您的img放置在CSS属性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滚动激怒）。

希望能给予一点帮助。有很多的选择

来源

2012-10-14 17:32:24

http://andrehelbig.de/链接已损坏。你可以添加一个片段到你的答案？ – Stephan

老问题，但对于未来的Google员工，我写了一个jQuery插件，它能够自动调整图像：

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

来源

2014-02-26 18:22:47

可以请你试试这个代码。将图像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-24 07:52:40

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

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

尝试这样的：

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-03 07:39:15

自动调整大小的图像，以适应浏览器

回答

相关问题