Hinzufügen von Höhe und Breite zu Src mehrerer img-Tags

Ich habe den folgenden HTML-Code:Hinzufügen von Höhe und Breite zu Src mehrerer img-Tags

<p>adfa</p> 
<p><img src="http://localhost:27756//download.jpg" alt="" width="282" height="179" /></p> 
<p>adfa</p> 
<p><img src="http://localhost:27756/Summit 2013-5.jpg" alt="" width="358" height="358" /></p> 
<p>adfa</p>

Jetzt möchte ich die Höhe und Breite eines jeden Bildes zu seiner src hinzuzufügen. Wie kann ich das machen? Ich bin sehr neu in jQuery.

Quelle

2016-04-14 Nimit Joshi

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script> 

     <script type='text/javascript'> 
      function addDimensionsToSrc(){ 
      jQuery("img").each(function(idx,el){ 
       el.src = el.src + "?height=" + el.height + "&width=" + el.width;  
      }); 
      } 
     </script> 
    </head> 
    <body> 
     <p>adfa</p> 
     <p><img src="http://localhost:27756//download.jpg" alt="" width="282" height="179" /></p> 
     <p>adfa</p> 
     <p><img src="http://localhost:27756/Summit 2013-5.jpg" alt="" width="358" height="358" /></p> 
     <p>adfa</p> 
    </body> 
</html>

Quelle

2016-04-14 05:20:32

Erstellen Sie eine HTML-Datei mit dem oben Code, führen Sie es in einem Browser aus, drücken Sie F12, um die Konsole zu öffnen, und führen Sie das Javascript zeilenweise aus. –

Danke Mann. Du hast meine Zeit gerettet. –

versuchen, etwas wie folgt aus:

$('img').each(function() { 

alert($(this).attr('src')); 

$(this).css('width',500); 
$(this).css('height',500); 

});

Wenn Sie hinzufügen möchten, zu img Attribut können Sie tun:

$('img').each(function(i) { 

alert('OLD:Width for image at index '+i+' is '+$(this).attr('width')); 
alert('OLD:height for image at index '+i+' is '+$(this).attr('height')); 

$(this).attr('width',500); 
$(this).attr('height',500); 

alert('NEW:Width for image at index '+i+' is '+$(this).attr('width')); 
alert('NEW:height for image at index '+i+' is '+$(this).attr('height')); 
});

Demo Fiddle: https://jsfiddle.net/eqr5s9ac/

Quelle

2016-04-14 05:19:03

$("img").each(function(idx, e) { 
    $(this).attr("src", $(this).attr('src') + '?width=' + $(this).attr('width') + '&height=' + $(this).attr('height')); 
});

Geige hier: https://jsfiddle.net/y794tazy/

Um die wahren Bilder Breite und Höhe zu verwenden (da dies als verschieden sein können, was die Attribute gesetzt at), könnten Sie dies tun:

$("img").each(function(idx, e) { 
    $(this).attr("src", $(this).attr('src') + '?width=' + $(this).width() + '&height=' + $(this).height()); 
});

Quelle

2016-04-14 05:23:22

Ich habe die Idee. Danke –

Gern geschehen, froh zu helfen. Wenn Sie die Breite und Höhe der wahren Bilder anstelle der Attribute verwenden möchten, können Sie '$ (this) .width()' und '$ (this) .height()' verwenden. –

Hinzufügen von Höhe und Breite zu Src mehrerer img-Tags

Antwort

Verwandte Themen