aumentar tamaño div

[manel2292]

Hola, necesito aumentar el tamaño de un div tanto altura como anchura, pero necesito que lo haga de dentor hacia afuera y no de una punta hacía la otra (no sé si me explico, así que dejo una imagen, lo de la izquierda es lo que ya tengo, y lo de la derecha lo que quiero lograr)



gracias.

[Alexis88]

En diseño web, el punto cero o de partida, es la esquina superior izquierda, es la coordenada (0, 0), por lo tanto, cuando se desee incrementar el tamaño de un elemento, siempre será hacia abajo o a la derecha, no puede ser a la izquierda o arriba porque son valores negativos y una vez que los valores de las dimensiones sean negativos, el objeto deja de ser visible.

Sin embargo, se puede emular el efecto visual de crecimiento hacia los cuadro lados de la siguiente forma:

Supongamos que en el documento, tenemos un elemento div. Le añadimos estilos:

Código CSS:

div {
  width: 10em;
  height: 10em;
  top: 50%;
  left: 50%;
  margin: -5em 0 0 -5em;
  position: absolute;
  border: .2em #f00 solid;
}
 

Código Javascript:

$("div").click(function(){
  $(this).css({
    "width": "+=10em",
    "height": "+=10em",
    "margin": "+=-5em 0 0 +=-5em"
  });
});
 

Con los estilos aplicados, el elemento queda centrado y con un borde de color rojo, luego, cuando le de un clic al div, aumentará en 10 medidas escalares su altura y ancho, así como los márgenes superior e izquierdo que son los responsables de mantener centrado al elemento. De esta manera, el elemento seguirá creciendo hacia la derecha y abajo, pero su posición siempre será 5 medidas escalares menos de la anterior, esto debido a sus nuevas dimensiones. Se mantiene la proporción.

Saludos