communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery实现图片按比例缩放示例_jquery

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

WBOY
Libérer： 2016-05-16 16:42:47
original
1077 Les gens l'ont consulté
  <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>
Copier après la connexion
Étiquettes associées：
缩放
source：php.cn
Article précédent：IE8下Jquery获取select选中的值post到后台报错问题_jquery Article suivant：jquery实现人性化的有选择性禁用鼠标右键_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
PHPUnit peut-il comparer strictement deux tableaux contenant des objets en utilisant des assert égaux ? J'ai deux tableaux d'objets. Je veux tester si ces deux tableaux sont égaux, mais en utili...
Depuis 2024-04-05 13:35:37
0
1
1382
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Problèmes jQuery.remove() et array.splice() J'ai donc une page qui contient une liste d'articles et une liste de courses. Si vous ajou...
Depuis 2024-04-04 17:21:35
0
1
347
Connectez votre compte et obtenez vos tokens facilement avec le simple bouton de DocuSign J'utilise la version SDK et j'obtiens presque ce que je veux, mais ce n'est pas encore cla...
Depuis 2024-04-04 15:46:02
0
1
396
Je construis trois pages en utilisant React, chaque page a son propre fichier CSS et il n'y a qu'un seul fichier CSS pour chaque page Je travaille sur ces trois pages : App.js a deux boutons, lorsque vous cliquez sur le prem...
Depuis 2024-04-04 10:07:16
0
1
394
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal