缩放浏览器底部出现留白

尤雨塘 2021-03-28 10:22:55

随着缩放浏览器，浏览器底部出现大量留白，该怎么解决啊？

...全文

1154 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

我爱小仙女 2021-03-29

打赏
举报

回复

监听onresize事件

sha虫剂 2021-03-29

打赏
举报

回复

高度别给固定的，用100%，如果你的body或者外层盒子没法给高度100%可以用100vh,但是这个存在移动端兼容问题，可以用window.innerHeight 动态JS设置高度（三种方法各有利弊，看你自己项目适合哪种）

** @Description: 图片叠加demo** @Author: haodaquan** @Date: 2016-11-30 12:07:51** @Last Modified by: haodaquan** @Last Modified time: 2017-02-09 13:59:51**********************************************...

遇到这样一个需求：原图大小不一，而且留白也大小不一，需要将原图切出来一个核心图，然后将图片左右留白，组成一个其他尺寸的图片。换句话说，原图在新图片中的位置是可以控制的。这里思路是：先创建一个规定大小的底图，然后将原图经过缩放后，放到底图中，也就是图片叠加。####这里实现的是第二个箭头所示的效果。(完成第一个箭头效果请移步http://www.cnblogs.com/haodaquan/p/638...

遇到这样一个需求：原图大小不一，而且留白也大小不一，需要将原图切出来一个核心图，然后将图片左右留白，组成一个其他尺寸的图片。换句话说，原图在新图片中的位置是可以控制的。这里思路是：先创建一个规定大小的底图，然后将原图经过缩放后，放到底图中，也就是图片叠加。 ####这里实现的是第二个箭头所示的效果。（完成第一个箭头效果请移步http://www.cnblogs.com/haod...

问题描述： div里放了个图片，底部留白，用了padding:0，没去掉，记录一下。原因分析： img元素默认是inline元素，而inline元素的vertical-align属性的默认值为baseline，也就是文字基线对齐，所以图片底部的留白就是baseline和bottom之间的距离。解决方案：使用display: block;将img转换成block元素即可。重写默认的vertical-align: baseline;，建议设置为vertical-align: middle; 设置图

本篇记录了大屏的三种缩放（按分辨率进行缩放、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)和窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条）的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~

61,117

社区成员

60,701

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章