使用百分比设置自动缩放图片的小技巧

最新推荐文章于 2021-10-20 10:37:23 发布

dcdbgsyps7474742

最新推荐文章于 2021-10-20 10:37:23 发布

阅读量243

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Hfive/p/3892834.html

版权

响应式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" alt="">
</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" alt="">
<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>

转载于:https://www.cnblogs.com/Hfive/p/3892834.html