Aupa
Si, tienes razón, mi idea entre otras cosas era para ahorrar todo esto que
dices, tanto de programación, de trabajo de quien sube las imágenes, como de
recursos de servidor (que igual al final sale lo mismo el hecho de recortar la
foto y todo eso comparándolo con que en los thumbnail se cargue la foto entera,
no controlo mucho).
Gracias
El 22/10/2011, a las 04:17, José Galisteo escribió:
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=222pxstyle=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
___
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
