Para mi lo mas sencillo y que además hacen hasta los mas grandes es hacer un crop en servidor, es decir, subes una imagen, en servidor la recorto por ejemplo a 50x50, la reduzco hasta que una de sus dimensions (ancho o alto) llegue a 50 y el resto lo corto, luego para maquetar no hay problema, además visualmente suele dar mejor resultado que tener la imagenes tal y como vengan.
El 30 de septiembre de 2011 11:45, Martin Etxauri <t...@eragin.com> escribió: > 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 > -- http://www.linkedin.com/in/josegalisteo http://jose.gr _______________________________________________ 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
