php - remove - strip_tags()

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

Question

Así que después de una extensa investigación y un montón de soluciones de jQuery y Javascript, simplemente no pude encontrar una manera de escalar dinámicamente las imágenes a un tamaño específico tanto horizontal como verticalmente, encontré toneladas de información sobre escalado para ajustar el ancho y mantener la relación de aspecto. o escala 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.

Entonces en mi ejemplo, tenía un <div> con un ancho establecido de 460px y una altura establecida de 280px, y necesito que la imagen encaje, todo en esa área sin estirar (manteniendo su relación de aspecto)

Answer 1

Ahora, después de juguetear con algunos ejemplos de ancho, mis habilidades clásicas de álgebra comenzaron a funcionar.

Si tomé el ancho y lo dividí por la altura, entonces en este caso, 460/280 a cambio obtiene 1.642 ... que es la relación de aspecto de esa área, ahora si miro la relación de aspecto de la imagen, Sabía que si era mayor que 1.642 ... eso significaba que era más ancho que el área, y si la relación de aspecto de la imagen era menor que, era más alto.

Así que se me ocurrió lo 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 lo compartiría, espero que esto ayude a algunas personas

Answer 2

Si entiendo tu pregunta correctamente, la forma más sencilla de escalar las imágenes sería usar las siguientes reglas de estilo CSS:

max-width
max-height

Estas dos reglas de diseño le permiten especificar el ancho / alto máximo 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 usar estos dos para especificar un ancho / alto mínimo para una imagen:

min-width
min-height