Cambiar el tamaño de una imagen a un porcentaje de sí misma exclusivamente con CSS

En el ámbito del diseño web, la necesidad de cambiar el tamaño de las imágenes a dimensiones específicas surge con frecuencia. Un escenario implica reducir el tamaño de una imagen a un porcentaje de su tamaño original, sin alterar el tamaño de su elemento contenedor. Si bien JavaScript o scripts del lado del servidor ofrecen soluciones, este artículo explora posibles alternativas solo CSS.

¿Es posible cambiar el tamaño de una imagen usando porcentajes CSS?

En la actualidad , no existe una propiedad CSS directa que permita cambiar el tamaño de una imagen según su propio tamaño. Sin embargo, existen dos métodos ingeniosos que pueden lograr este efecto:

Método 1: cambio de tamaño visual con transformación

Este método reduce visualmente el tamaño de una imagen sin afectar su Dimensiones reales. La técnica utiliza la propiedad 'transform: scale()' para reducir la imagen en un porcentaje específico. La imagen permanece centrada dentro de sus dimensiones originales.

Ejemplo:

img {
  transform: scale(0.5);
}