Al hacer una imagen redonda con CSS3, normalmente solemos utilizar el siguiente código, o alguno parecido:

Con este código solucionaremos prácticamente todos nuestros problemas, pero ¿Qué ocurre si queremos que este circulo sea dinámico y varíen sus dimensiones respecto a la ventana?

Lo que nos dice la lógica es poner las dimensiones en porcentaje:

Pero al cambiar las dimensiones fijas por porcentajes vemos que las dimensiones no son correctas (en el mejor de los casos) o desaparece.

Esto ocurre porque las dimensiones son diferentes o la propiedad «height» puede estar no definida.

Para que el porcentaje sea el mismo en vez de utilizar la propiedad «height» utilizaremos «padding-bottom», ya que esta última utiliza la propiedad «width» para su tamaño en porcentaje.

Podéis ver un ejemplo de todo esto:

Ver ejemplos