Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > jquery实现图片按比例缩放示例_jquery

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

WBOY
Freigeben： 2016-05-16 16:42:47
Original
1082 Leute haben es durchsucht
  <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>
Nach dem Login kopieren
Verwandte Etiketten：
缩放
Quelle：php.cn
Vorheriger Artikel：IE8下Jquery获取select选中的值post到后台报错问题_jquery Nächster Artikel：jquery实现人性化的有选择性禁用鼠标右键_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Kann PHPUnit „asset equal' verwenden, um zwei Arrays, die Objekte enthalten, streng zu vergleichen? Ich habe zwei Arrays von Objekten. Ich möchte testen, ob diese beiden Arrays gleich sind, ...
Aus 2024-04-05 13:35:37
0
1
1382
So rufen Sie Werte nicht ausgewählter Zeilen in einer HTML-Datentabelle mithilfe von JQuery ab Ich versuche, den Wert aller Zeilen zu ermitteln, in denen nicht auf die Schaltfläche gekl...
Aus 2024-04-05 09:26:49
0
1
1418
Probleme mit jQuery.remove() und array.splice() Ich habe also eine Seite mit einer Artikelliste und einer Einkaufsliste. Wenn Sie x Artike...
Aus 2024-04-04 17:21:35
0
1
347
Verbinden Sie Ihr Konto und erhalten Sie Ihre Token ganz einfach mit der einfachen Schaltfläche von DocuSign Ich verwende die SDK-Version und bekomme fast das, was ich will, aber es ist noch nicht kl...
Aus 2024-04-04 15:46:02
0
1
396
Ich erstelle drei Seiten mit React, jede Seite hat ihre eigene CSS-Datei und es gibt nur eine CSS-Datei für jede Seite Ich arbeite an diesen drei Seiten: App.js hat zwei Schaltflächen. Wenn Sie auf die erste S...
Aus 2024-04-04 10:07:16
0
1
394
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage