Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > jquery实现图片按比例缩放示例_jquery

jquery实现图片按比例缩放示例_jquery

WBOY
Release： 2016-05-16 16:42:47
Original
1093 people have browsed it
  <html> 
    <title></title> 
    <head></head> 
    <style> 
      .thumbnail{overflow:hidden;width:400px;height:240px;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
    <script language="javascript"> 
      $(function(){ 
        /* 图片不完全按比例自动缩小 by zwwooooo */ 
          $('#content div.thumbnail img').each(function(){ 
            var x = 400; //填入目标图片宽度 
            var y = 240; //填入目标图片高度 
            var w=$(this).width(), h=$(this).height();//获取图片宽度、高度 
            if (w > x) { //图片宽度大于目标宽度时 
              var w_original=w, h_original=h; 
              h = h * (x / w); //根据目标宽度按比例算出高度 
              w = x; //宽度等于预定宽度 
              if (h < y) { //如果按比例缩小后的高度小于预定高度时 
                w = w_original * (y / h_original); //按目标高度重新计算宽度 
                h = y; //高度等于预定高度 
              } 
            } 
            $(this).attr({width:w,height:h}); 
          }); 
      }); 
    </script> 
    <body> 
    <div id="content"> 
      <div id="thumbnail" class="thumbnail" > 
        <img  id="web" src="./midle.png"/ alt="jquery实现图片按比例缩放示例_jquery" > 
      </div> 
     </div> 
    </body> 
  </html>
Copy after login
Related labels：
Zoom
source：php.cn
Previous article：IE8下Jquery获取select选中的值post到后台报错问题_jquery Next article：jquery实现人性化的有选择性禁用鼠标右键_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Can PHPUnit use assert equals to strictly compare two arrays containing objects? I have two arrays of objects. I want to test if these two arrays are equal, but using a st...
From 2024-04-05 13:35:37
0
1
1382
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
jQuery.remove() and array.splice() issues So I have a page that has a list of items and a shopping list. If you add x number of item...
From 2024-04-04 17:21:35
0
1
347
Connect your account and get your tokens easily with DocuSign's simple button I'm using the sdk version and almost get what I want, but it's not clear yet. How can we c...
From 2024-04-04 15:46:02
0
1
396
I'm building three pages using React, each page has its own css file and there is only one css file for each page I'm working on these three pages: App.js has two buttons, when you click the first button ...
From 2024-04-04 10:07:16
0
1
394
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template