Hola a todos Vengo a mostraros algo a lo que he llegado dándole vueltas al asunto de los thumbnails y de como hacer para mostrar una parte de la imagen, pero que sea el centro, esto es, recortarla y que se vea el centro en vez de una esquina, además como la proporción de las imágenes es variable y algunas van en horizontal y otras en vertical no vale con ponerle un margen negativo X.
He acabado en esto, que no se si es algo requetesabido o medio nuevo o que, y a ver que os parece. (pongo todos los estilos inline para que se vean, pero estarían fuera, claro, y aparte habría que apañar algo para el hover y todo el maqueo) <li style="border: height:150px; width:150px; overflow:hidden;"> <a style="display:block; width:350px; height:350px; margin:-100px; text-align:center; line-height:350px;"> <img src="txo_rradak/2dscanerportrait.png" height="222px"style="vertical-align:middle;" /> </a> </li> -El <li> recorta la imagen al tamaño de thumbnail que queremos. -Utilizamos el <a> para crear un espacio dentro del <li> mas grande que la imagen para poder centrarla en él, tanto horizontal como verticalmente y que así se muestre el centro. Y nos ahorramos añadir un div o span extra. -En el ejemplo, al ponerle un alto de 222px a la imagen, nos aseguramos de que tanto imágenes verticales como horizontales llenan los 150x150px del thumbnail (siempre que tengan una proporción de foto cercana a la estandar). Y así nos ahorramos tener que discriminar mediante programación si es horizontal o vertical. (En este caso las verticales se mostrarían algo mas pequeñas que las horizontales, pero si en vez de ponerle height:222px le ponemos width:222px sería al revés) -En este caso las medida están calculadas para que al poner una dimensión por css a todas las imágenes, ya sean verticales u horizontales, por un lado llenen el thumbnail y por otro sean mas pequeñas que el <a> para que se centren bien. A ver que os parece, si lo veis bien, ventajas-defectos... o simplemente si os viene bien para algo. Creo que si queremos hacer virguerías en el hover del <a> vamos a estar limitados, pero siempre se pueden hacer cosillas. Saludos a todos. 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
