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
