JMiur [E]

Un elefante ocupa mucho espacio, dos elefantes ocupan mucho más ... es obvio ¿verdad? Pero también es obvio que si al elefante le ponemos un abrigo grueso, su volumen se incrementará aunque vaya uno a saber para qué habría que abrigar a un elefante.

En una página web pasa lo mismo; "algo" tiene un tamaño, ya sea porque nosotros lo hayamos establecido con width y height o bien porque "mide" eso.

El caso típico es una imagen; yo sé que esta mide exaxtamente 133x200:


Lo sé porque la medí, porque la miré en el navegador y decía que medía eso o bien porque la cargué indicando expresamente que la quería de ese tamaño.

Hasta ahí, todo bien pero empezamos a ponerle detallecitos, muchos detallecitos y, cuando queremos ubicarla, no entra en ese espacio que habíamos reservado. Algo falla y este problema sólo se resuelve con aritmética.
.estaimagen {
  background-color: #FFF;
  border: 5px solid #505961;
  box-shadow: 0 0 20px #FFF;
  height: 200px;
  margin: 20px;
  padding: 3px;
  width: 133px;
}

<img class="estaimagen" src="URL_iIMAGEN" />

¿Cuál es el tamaño final? ¿Qué espacio necesito para que entre y no se corte?


Sumamos:

si el ancho es 133
padding 3 a cada lado así que 3 + 3 = 6 => 133 + 6 = 139
border 5 a cada lado así que 5 + 5 = 10 => 139 + 10 = 149
margin 20 a cada lado así que 20 + 20 = 40 => 149 + 40 = 189

ancho + padding + border + margin = ancho real
133 + 6 + 10 + 40 = 189

Lo mismo pasará con la altura:

alto + padding + border + margin = alto real
200 + 6 + 10 + 40 = 256

¿Y la sombra? En versiones anteriores a IE9 se usan filtros que no las muestran de modo similar, son "duras" así que no las tenemos en cuenta. De todas maneras, en todos los navegadores, esas sombras también ocupan espacio; y es por eso que en este ejemplo se agrega un margen para que "haga lugar" a esa sombra. Si usáramos valores más altos, deberíamos incrementar ese margen o las sombras se cortarían.

Verificamos el calculo poniendo varias imágenes dentro de un contenedor de tamaño fijo:
<style>
  #demotamanio {
    border: 1px solid #666;
    height: 256px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 189px;
  }
  #demotamanio br {
    display:none;
  }
  #demotamanio img {
    background-color: #FFF;
    border: 5px solid #505961;
    box-shadow: 0 0 20px #FFF;
    float:left;
    height: 200px;
    margin: 20px;
    padding: 3px;
    width: 133px;
  }
</style>

<div id="demotamanio">
  <div>
    <img src="URL_IMAGEN1"/>
    <img src="URL_IMAGEN2"/>
    <img src="URL_IMAGEN3"/>
  </div>
</div>

x1 | x2 | x3

Otra vez aritmética; si cada imagen requiere 189 pxeles, dos imágenes requieren 189 x 2 = 378 y tres 189 x 3 = 567

7 comentarios:

Amador López Criado  

Las cosas parecen obvias para el que las sabe. Gracias por tus lecciones.

Responder
Adrián J. Messina  

Es que el mundo del CSS no es como el mundo actual, los detalles si importan y también suman.

Abrazo.

Responder
Beben Koben  

it's cool too :O
ck ck ck ^:)^

Responder
La hormiguita  

Y el elefante????? que paso???? :D

Responder
Unknown  

JMiur que modifico en este codigo para poder publicar la imagen con el efecto de tu publicacion en una entrada individual (o sea un post):
img alt="Aca titulo" border="0" src="http://www.mediafire.com/imgbnc.php/f3cefc70652d7f2917c801f36855d76ad51774196385a986e74b2a133fa206c04g.jpg" />
Gracias.

Responder
JMiur  

Para colocar estilos inline es decir, dentro de una etiqueta, se usa style como atributo con las mismas propiedades; en este ejemplo:

< img style="background-color: #FFF;border: 5px solid #505961;box-shadow: 0 0 20px #FFF;float:left;height: 200px;margin: 20px;padding: 3px;width: 133px;" src="URL_imagen" alt="xxxx" />

Responder
Unknown  

Gracias Maestro ya lo estoy aplicando.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR