Cambiar el tamaño de las imágenes proporcionalmente

Recuerdo que cuando estudiaba nunca faltaba el que protestaba diciendo que los temas que veíamos en matemáticas no eran trascendentes ya que no nos serían útiles en la vida cotidiana. Bueno, esto no es del todo cierto, y aquí veremos un claro ejemplo de cómo aplicar las matemáticas para solucionar lo que puede resultar un problema con la presentación del blog.

Cuando hemos subido una imagen y deseamos cambiarle el tamaño aplicando las propiedades width y height (ancho y alto respectivamente) podemos correr el riesgo de que la imagen quede desproporcionada y dé una apariencia de deformación.

Esto sucede porque aplicamos un ancho sin saber cuál es la medida proporcional que debe tener el alto de la imagen.

Por lo que, si aplicamos las medidas correctas tendremos una imagen en proporción de medidas, pero sino el resultado puede verse muy mal.

Imagen en proporción

Imagen desproporcionada

Por ejemplo, supongamos que tenemos una imagen de mide 1024px de ancho por 768px de alto y queremos reducir su tamaño. Si quiero que el nuevo ancho de la imagen sea de 500px ¿cuál deberá ser el alto de la imagen?

Si bien podemos gastar una hora atinando las medidas hasta que se ajuste al tamaño más parecido, también podemos solucionarlo de una manera rápida y precisa; y para hacerlo usaremos la tan conocida regla de tres.

Es una ecuación simple en la cual, para conocer la medida  de X deberemos multiplicar A por B y dividirlo entre Y

Ok, ok, ahora en palabras cristianas que todos entendamos. Lo único que haremos será, multiplicar el ancho deseado por el alto original de la imagen. El resultado lo dividimos entre el ancho original de la imagen y el resultado será el alto que estamos buscando.

Siguiendo el ejemplo anterior entonces multiplicamos el ancho deseado que será de 500px por el alto original de la imagen que es de 768px.  Eso nos da 384,000px y lo dividiremos entre el ancho original de la imagen que es de 1024px. El resultado es 375px.

Esto significa que si cambiamos la imagen a 500px de ancho entonces el alto de la imagen deberá ser de 375px de alto para que quede a proporción. Fácil ¿no?

#divImagen img {
width:500px;
height:375px;
}

Y si por el contrario, quisiéramos saber el ancho de la imagen se sigue el mismo procedimiento pero a la inversa, es decir, multiplicamos el alto deseado por el ancho original. El resultado lo dividimos entre el alto original de la imagen, y lo que obtendremos será el ancho que estamos buscando.

Quizá puede parecer difícil por el miedo natural que les tenemos a las matemáticas, pero es una ecuación que con la práctica será fácil de aprender y nos ayudará a tener imágenes en tamaños precisos.