cha*_*fer 1 html javascript image autoresize
我有一个网站,提供不同尺寸的"随机"图片,有些甚至大多数图片都不适合浏览器,所以我想知道一种方法来调整它以适应浏览器视图而不滚动,所以为什么不Stack Overflow的家伙们!
显然保持比例,我尝试https://github.com/gutierrezalex/photo-resize/但没有按预期工作.
所以它是一个带有一些文本的html页面,中间的图像和其下的一些其他文本.
所有我想要的是滚动无法使用,因为图像应该缩小到足以这样做.
小智 11
您不需要任何JavaScript或黑客来实现这种图像缩放 - 简单的CSS和HTML将正常工作.(BTW也在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滚动所激怒).
希望能给一点帮助.