Los usuarios de carga y el tamaño de la foto se desconocen; necesita ser zoom en proporción. Como se muestra a continuación.
Echando un vistazo, puede usar texto: Center; En proporción, los atributos de ancho y altura que usan preajuste <img /> no se pueden resolver. Porque las imágenes de los usuarios pueden ser muy largas o muy amplias. Pensé en su relación en línea y juzgué que esto es lo siguiente:
if (ancho real> vista previa el ancho máximo) {
Ancho de escala = vista previa de ancho máximo
}
if (altura real> vista previa altura máxima) {
Altura de escala = vista previa altura máxima
}
Sin embargo, habrá problemas. Para permitir que se escala proporcional, se deben hacer varios juicios. Luego viola el principio de nuestra esperanza de automatización. Piense de nuevo, aunque no le gustan las matemáticas, pero las matemáticas siguen siendo muy útiles, debería haber otras maneras. Dado que se escala en proporción, ¿por qué no utilizar la proporción de imágenes reales y los anchos de área de vista previa para calcular su relación? Hmmmm ... realmente bien. De hecho, solo necesitamos hacer zoom en ancho o altura. Porque la proporción es solo grande y pequeña. Específicamente, escriba una función para implementarla:
Copiar código del código de la siguiente manera:
/**
* La imagen se acerca a la proporción adaptativa
* @param img {elemento} imágenes cargadas por el usuario
* @param maxwidth {número} el ancho máximo del área de vista previa
* @param maxheight {número} la altura máxima del área de vista previa
*/
Var resizeImg = function (img, maxwidth, maxHeight) {
var w = img.width,
h = img.head;
// Cuando la imagen no realiza ningún cambio que las horas de área de vista previa
if (w <maxwidth && h <maxheight) return;
// Cuando la relación de imagen real es mayor que la proporción de ancho y altura del área de vista previa
// anch de la imagen de escala, de lo contrario escalar el ancho de la imagen
w/h> maxwidth/maxHeight?