Immagine di ridimensionamento di Jquery

Mi piacerebbe iniziare una discussione sul ridimensionamento delle immagini usando jQuery.

Questo è il mio contributo: ma penso di essere molto lontano dalla soluzione. Che dire del ritaglio? Chi può aiutarmi?

$(document).ready(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image } // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } }); 

});

È necessario ricalcolare la larghezza e l’altezza dopo la prima condizione. Ecco il codice dell’intero script:

 $(document).ready(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth){ ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image } var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if current height is larger than max if(height > maxHeight){ ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } }); 

Un paio di suggerimenti:

  • Rendi questa una funzione in cui puoi passare in una dimensione massima o minima, piuttosto che codificarla; questo lo renderà più riutilizzabile
  • Se usi il metodo .animate di jQuery, come .animate({width: maxWidth}) , dovrebbe ridimensionare automaticamente l’altra dimensione.

Ottimo inizio. Ecco cosa mi è venuto in mente:

 $('img.resize').each(function(){ $(this).load(function(){ var maxWidth = $(this).width(); // Max width for the image var maxHeight = $(this).height(); // Max height for the image $(this).css("width", "auto").css("height", "auto"); // Remove existing CSS $(this).removeAttr("width").removeAttr("height"); // Remove HTML attributes var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height if(width > height) { // Check if the current width is larger than the max if(width > maxWidth){ var ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image } } else { // Check if current height is larger than max if(height > maxHeight){ var ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image } } }); }); 

Questo ha il vantaggio di permetterti di specificare sia la larghezza che l’altezza pur consentendo all’immagine di scalare in modo proporzionale.

Dai un’occhiata a Jcrop. Lo uso ed è molto buono.

http://deepliquid.com/content/Jcrop.html

 $(function() { $('.mhz-news-img img').each(function() { var maxWidth = 320; // Max width for the image var maxHeight = 200; // Max height for the image var maxratio=maxHeight/maxWidth; var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height var curentratio=height/width; // Check if the current width is larger than the max if(curentratio>maxratio) { ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height *ratio); // Scale height based on ratio } else { ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio } }); }); 
 $(document).ready(function(){ $('img').each(function(){ var maxWidth = 660; var ratio = 0; var img = $(this); if(img.width() > maxWidth){ ratio = img.height() / img.width(); img.attr('width', maxWidth); img.attr('height', (maxWidth*ratio)); } }); }); 

quello farà il trucco magico per tutti che usano l’ultimo jquery. Assicurati di aver impostato correttamente il selettore (ho usato $ (‘img’) ma nel tuo caso potrebbe essere diverso). Funziona solo per la modalità orizzontale. Ma se la guardi, devi fare solo alcune cose per impostarlo su portrait, aka, if img.height ()> maxHeight) roba

 $(function() { $('.story-small img').each(function() { var maxWidth = 100; // Max width for the image var maxHeight = 100; // Max height for the image var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width>height && width>maxWidth) { ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio } else if(height>width && height>maxHeight) { ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio } }); }); 

CSS:

 .imgMaxWidth { max-width:100px; height:auto; } .imgMaxHeight { max-height:100px; width:auto; } 

HTML:

  

jQuery:

  

Puoi ridimensionare l’immagine con questo pezzo di codice

  var maxWidth = 600; $("img").each(function () { var imageWidth = $(this).width(); var imageHeight = $(this).height(); if (imageWidth > maxWidth) { var percentdiff = (imageWidth - maxWidth) / imageWidth * 100; $(this).width(maxWidth); $(this).height(imageHeight - (imageHeight * percentdiff / 100)); } }); 

Modifica la risposta di Aleksandar per renderlo come plugin jquery e accetta maxwidth e maxheight come argomenti, suggerito da Nathan.

 $.fn.resize = function(maxWidth,maxHeight) { return this.each(function() { var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $(this).css("height", maxHeight); $(this).css("width", width * ratio); width = width * ratio; } }); }; 

Usato come $('.imgClass').resize(300,50);

 function resize() {resizeFrame(elemento, margin);}; jQuery.event.add(window, "load", resize); jQuery.event.add(window, "resize", resize); function resizeFrame(item, marge) { $(item).each(function() { var m = marge*2; var mw = $(window).width()-m; var mh = $(window).height()-m; var w = $('img',this).width(); var h = $('img',this).height(); var mr = mh/mw; var cr = h/w; $('img',this).css({position:'absolute',minWidth:(ww)+20,minHeight:(hh)+20,margin:'auto',top:'0',right:'0',bottom:'0',left:'0',padding:marge}); if(cr < mr){ var r = mw/w; $('img',this).css({width: mw}); $('img',this).css({height: h*r}); }else if(cr > mr){ var r = mh/h; $('img',this).css({height: mh}); $('img',this).css({width: w*r}); } }); } 

E vecchio post … un po ‘fermo. Il ridimensionamento è una cosa, ma può lasciare incostanti le immagini ridimensionate e apparire un po ‘disorganizzato. Così ho aggiunto alcune righe al post originale per aggiungere un margine sinistro per centralizzare le immagini ridimensionate.

 $(".schs_bonsai_image_slider_image").each(function() { var maxWidth = 787; // Max width for the image var maxHeight = 480; // Max height for the image var ratio = 0; // Used for aspect ratio var width = $(this).width(); // Current image width var height = $(this).height(); // Current image height // Check if the current width is larger than the max if(width > maxWidth) { ratio = maxWidth / width; // get ratio for scaling image $(this).css("width", maxWidth); // Set new width $(this).css("height", height * ratio); // Scale height based on ratio height = height * ratio; // Reset height to match scaled image width = width * ratio; // Reset width to match scaled image } // Check if current height is larger than max if(height > maxHeight) { ratio = maxHeight / height; // get ratio for scaling image $(this).css("height", maxHeight); // Set new height $(this).css("width", width * ratio); // Scale width based on ratio width = width * ratio; // Reset width to match scaled image height = height * ratio; // Reset height to match scaled image } var newwidth = $(this).width(); var parentwidth=$(this).parent().width(); var widthdiff=(parentwidth-newwidth)/2; $(this).css("margin-left",widthdiff); }); 

C’è tanto codice qui, ma penso che questa sia la migliore risposta

 function resize() { var input = $("#picture"); var maxWidth = 300; var maxHeight = 300; var width = input.width(); var height = input.height(); var ratioX = (maxWidth / width); var ratioY = (maxHeight / height); var ratio = Math.min(ratioX, ratioY); var newWidth = (width * ratio); var newHeight = (height * ratio); input.css("width", newWidth); input.css("height", newHeight); }; 

imgLiquid (un plugin jQuery) sembra fare ciò che chiedi.

demo:
http://goo.gl/Wk8bU

Esempio di JsFiddle:
http://jsfiddle.net/karacas/3CRx7/#base

Javascript

 $(function() { $(".imgLiquidFill").imgLiquid({ fill: true, horizontalAlign: "center", verticalAlign: "top" }); $(".imgLiquidNoFill").imgLiquid({ fill: false, horizontalAlign: "center", verticalAlign: "50%" }); }); 

html