首页 > 代码库 > 使用百分比设置自动缩放图片的小技巧
使用百分比设置自动缩放图片的小技巧
响应式web网页开发中,如果要求无论是PC端还是移动端,网页都要铺满整个屏幕,并且图片要随着屏幕进行自动缩放。图片自动缩放很容易想到用百分比来设定宽高,可是用百分比形式设置图片的宽高,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。这也会引发一个问题,那就是当浏览器只是宽度改变而高度不变时,图片默认下宽度是随着浏览器变化而变化,而图片的高度也会岁宽度发生改变。原本想要的是当屏幕宽度改变高度不变的时候,图片也只是宽度改变高度不变,这可怎么办呢?
当给图片宽高设定百分比时,屏幕宽度改变高度不变,图片宽高都会发生改变,如下代码:
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>使用图片</title><style type="text/css"> img{ width: 60%; height: 50%; }</style></head><body><img src="http://anshun.wedsoso.com/uploadfile/1302/11301221423571361427837432.jpg" ></body></html>
屏幕宽度改变高度不变,图片也只是宽度改变高度不变
解决方案:给窗口添加一个resize()事件,屏幕改变的时候获取而屏幕的宽高,然后按照一定的比例对图片进行缩放,值得注意的是,浏览器还没有改变的之前图片也要按照一定的比例进行缩放,所以要在事件外面给图片设定同样的宽高比例。
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>使用图片</title><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><style type="text/css"> img{ width: 60%; height: 50%; }</style></head><body><img src="http://anshun.wedsoso.com/uploadfile/1302/11301221423571361427837432.jpg" ><script type="text/javascript">$("img").width(document.documentElement.clientWidth*0.6); $("img").height(document.documentElement.clientHeight*0.5);$(window).resize(function() { $("img").width(document.documentElement.clientWidth*0.6); $("img").height(document.documentElement.clientHeight*0.5); }); </script></body></html>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。