Hola a todos

Vengo a ver si alguien conoce una algo que creo que no existe :)

El tema es para unas miniaturas de una galería, tenemos un img dentro de un 
<a>, digamos que el <a> tiene 100px de alto y de ancho y la imagen 100 de alto 
y 200 de ancho de manera que la imagen queda recortada dentro del <a>. La 
cuestión es centrar esa imagen dentro del a para que en el recorte se vea el 
centro. El verdadero problema es que las imágenes no tendrán todas la misma 
proporción y por ende serán de ancho variable, no tendrán todas 200px.

Yo tengo dos maneras, pero busco una tercera milagrosa :) (que no he encontrado 
en internet, cla)

A) Meter el img dentro de un span de mayor tamaño:

<a ... ><span><img ... /></span></a>

a{
        display:block:
        width: 100px;
        height: 100px;
        overflow:hidden;
        ...
}
span{
        display:block:
        height:100px;
        width:300px; /*en cualquier caso una medida mayor que cualquiera de las 
fotos que entrarán*/
        margin-left:-100px;/*o lo que haga falta para que el span quede 
centrado en el <a> según el width del span*/
        text-align:center;
}

en vez del margin-left también podemos usar un position:relative; y 
left:-100px; que igual es mejor.
pero claro, aquí no me mola que ese span no pinta nada ahí.


B) Hacer lo mismo que hacemos con el span con la img y calcular el margin-left 
en base a la anchura de la imagen mediante programación.

Pero claro, aquí le metes a hacer cálculos por cada miniatura y aparte del 
trabajo extra de programación le va a costar mas cargar todo, además de que 
tendrías que meter el margin-left inline... y bueno, que molaría poder hacerlo 
solo con css.

¿alguien conoce alguna solución milagrosa?

gracias a todos.

saludos

Martin
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a