自动调整图像大小以适合浏览器
自动调整图像大小以适合浏览器
提问于 2012-10-14 16:53:22
我有一个网站，它提供不同尺寸的“随机”图片，一些，如果不是大多数图片恰好不适合浏览器，所以我想知道一种方法来调整它的大小，以适应浏览器视图而不滚动，所以为什么不堆栈溢出的家伙！
显然保持比例，我尝试了https://github.com/gutierrezalex/photo-resize/，但没有像预期的那样工作。
这是一个html页面，包含一些文本，中间是图像，下面是其他文本。
所有我想要的是滚动不能使用，因为图像应该缩小到足够这样做。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-10-14 17:32:24
你不需要任何JavaScript或hacks来实现这种图像缩放-简单的CSS和HTML就可以很好地工作。(顺便说一句，也可以在iPad和iPhone上使用。)
你可以用CSS属性height:100%;来放置你的img，它将在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滚动所激怒)。
希望这能给你一点帮助。
Stack Overflow用户
发布于 2017-08-03 07:39:15
试试这个：
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>
Stack Overflow用户
发布于 2014-02-26 18:22:47
老问题，但对于未来的谷歌，我已经写了一个jQuery插件，它可以自动调整图片的大小，有很多选择：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12884402
复制相关文章
相似问题
上传前调整Codeigniter镜像大小
上传前的Jquery文件上传大小验证
上传前如何验证图片大小？
上传前重命名镜像
上传前压缩iPhone镜像
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
