zoukankan      html  css  js  c++  java
  • 使用百分比设置自动缩放图片的小技巧

         响应式web网页开发中,如果要求无论是PC端还是移动端,网页都要铺满整个屏幕,并且图片要随着屏幕进行自动缩放。图片自动缩放很容易想到用百分比来设定宽高,可是用百分比形式设置图片的宽高,那么不管是放大还是缩小,浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化,图像也就不会发生扭曲。这也会引发一个问题,那就是当浏览器只是宽度改变而高度不变时,图片默认下宽度是随着浏览器变化而变化,而图片的高度也会岁宽度发生改变。原本想要的是当屏幕宽度改变高度不变的时候,图片也只是宽度改变高度不变,这可怎么办呢?
     
    当给图片宽高设定百分比时,屏幕宽度改变高度不变,图片宽高都会发生改变,如下代码:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>使用图片</title>
    <style type="text/css">
     img{
       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{
       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>
    

      

  • 相关阅读:
    LeetCode Find Duplicate File in System
    LeetCode 681. Next Closest Time
    LeetCode 678. Valid Parenthesis String
    LeetCode 616. Add Bold Tag in String
    LeetCode 639. Decode Ways II
    LeetCode 536. Construct Binary Tree from String
    LeetCode 539. Minimum Time Difference
    LeetCode 635. Design Log Storage System
    LeetCode Split Concatenated Strings
    LeetCode 696. Count Binary Substrings
  • 原文地址:https://www.cnblogs.com/Hfive/p/3892834.html
Copyright © 2011-2022 走看看