Escala dinámicamente imágenes para ajustarse a un ancho y altura de tamaño especificado

Question

Así que después de una extensa investigación y toneladas de soluciones jQuery y Javascript, simplemente no pude encontrar una manera de escalar dinámicamente imágenes a un tamaño específico tanto horizontal como verticalmente, encontré toneladas de información sobre escalado para ajustarlo a la anchura y mantener la relación de aspecto, o escalar para ajustarse a la altura y mantener la relación de aspecto, pero no pudo determinar si la imagen era demasiado alta o demasiado corta y ajustarla en consecuencia.

Así que en mi ejemplo, tenían un <div> con una anchura de conjunto de 460 px y una altura conjunto de 280px, y necesito la imagen para ajustarla, todo de sí mismo en esa zona sin estirar (manteniendo su relación de aspecto)

Answer 1

Ahora, después de perder el tiempo con algunos ejemplos de ancho mis conocimientos de álgebra clásicos se activaron.

Si tomaba el ancho y dividido por la altura, por lo que en este caso, 460/280 que a cambio de obtener 1.642 ... lo cual es la relación de aspecto de esa área, ahora si mirara la relación de aspecto de la imagen, sabía que si era mayor que 1.642 ... eso significaba que era más ancha que el área, y si la relación de aspecto de la imagen fué menos que, que era más alto.

Así que se le ocurrió la siguiente,

// 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.'">'; 

y funcionó perfectamente, así que pensé que iba a compartir, espero que esto ayuda a algunas personas

Answer 2

Si entiendo bien su pregunta, me manera más sencilla de escalar las imágenes sería utilizar las siguientes reglas de estilo CSS:

max-width 
max-height 

Estas dos reglas de estilo alow especificar la máxima anchura/altura de una imagen. El navegador escalará la imagen (conservando la relación de aspecto) para que se ajuste al tamaño que especifique. También puede utilizar estos dos para especificar una anchura/altura mínima de una imagen:

min-width 
min-height