Ridimensiona dinamicamente le immagini per adattarle a una larghezza e un'altezza specificate

Question

Quindi, dopo ricerche approfondite e tonnellate di soluzioni jQuery e Javascript, non sono riuscito a trovare un modo per ridimensionare dinamicamente le immagini a una dimensione specificata sia orizzontalmente che verticalmente. di informazioni sul ridimensionamento per adattarsi alla larghezza e mantenere le proporzioni, o il ridimensionamento per adattarsi all'altezza e mantenere le proporzioni, ma non è stato possibile capire se l'immagine era troppo alta o troppo corta e regolare di conseguenza.

Così nel mio esempio, ho avuto un <div> con una larghezza serie di 460PX e un'altezza insieme di 280px, e ho bisogno l'immagine per adattarla, tutto se stesso in quella zona senza stiramento (mantenendo le proporzioni)

Answer 1

Ora, dopo trafficando con alcuni esempi di larghezza le mie competenze di algebra classici calci.

Se ho preso la larghezza e diviso per l'altezza, quindi in questo caso, 460/280 in cambio ottenere 1.642 ... che è il rapporto di aspetto di quell'area, ora se guardavo le proporzioni dell'immagine, sapevo che se era maggiore di 1.642 ... quello significava che era più largo dell'area e se le proporzioni dell'immagine era meno che, era più alto.

Così mi è venuta con il seguente,

// Set the Image in question 
$image = 'img/gif/b47rz.gif'; 

// Set the width of the area and height of the area 
$inputwidth = 460; 
$inputheight = 280; 

// Get the width and height of the Image 
list($width,$height) = getimagesize($image); 

// So then if the image is wider rather than taller, set the width and figure out the height 
if (($width/$height) > ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = ($inputwidth * $height)/ $width; 
     } 
// And if the image is taller rather than wider, then set the height and figure out the width 
     elseif (($width/$height) < ($inputwidth/$inputheight)) { 
      $outputwidth = ($inputheight * $width)/ $height; 
      $outputheight = $inputheight; 
     } 
// And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well 
     elseif (($width/$height) == ($inputwidth/$inputheight)) { 
      $outputwidth = $inputwidth; 
      $outputheight = $inputheight; 
      } 
// Echo out the results and done 
echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">'; 

e ha funzionato perfettamente, così ho pensato che avrei condiviso, speriamo che questo aiuta alcune persone

Answer 2

Se ho capito bene la tua domanda, ho modo più semplice di ridimensionamento delle immagini sarebbe quella di utilizzare le seguenti regole di stile CSS:

max-width 
max-height 

Queste due regole di stile alow di specificare la larghezza/altezza massima di un'immagine. Il browser ridimensiona l'immagine (mantenendo le proporzioni) per adattarla alla dimensione specificata. È inoltre possibile utilizzare questi due per specificare una larghezza/altezza minima di un'immagine:

min-width 
min-height