Clip CSS y Posicionamiento absoluto

Question

Estoy usando clip para crear miniaturas para una galería. Desafortunadamente, el clip solo se puede usar cuando un elemento está absolutamente posicionado. Aplicado por igual a cada img, esto por supuesto hace que todos se sientan el uno al otro mientras usan un estilo CSS, algo como esto.

.Thumbnails { 
    position: absolute; 
    height: 105px; 
    clip: rect(50px 218px 155px 82px); 
} 

¿Cómo puedo posicionarlos uno en relación con el otro? Solo quiero filas básicas.

Answer 1

No recomendaría una solución de CSS puro. ¿Ha considerado una biblioteca como phpThumb? A partir de ahí sólo tiene que utilizar el siguiente CSS:

.Thumbnails{float:left} 

y las referencias a las miniaturas terminar pareciéndose a esto:

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" /> 

Esa línea, básicamente, crear una miniatura de 100x100, el ZC especifica un cultivo de zoom (recortar para que coincida con la relación de aspecto, y la biblioteca miniatura hace algunas almacenamiento en caché bastante ingeniosa para reducir la carga del servidor

Answer 2

He hecho un poco de CSS, y no recuerdo haber usado ni visto clips. Misunderstood CSS Clip sugiere que no soy el único: "La propiedad del clip CSS tiene que ser una de las propiedades menos utilizadas en CSS. Probablemente se deba a que nadie sabe cuándo usarla, no parece ser compatible con Internet. Explorer, y algunas personas lo usan incorrectamente ".

Así que no lo hagas con el clip. Eso te permite deshacerte de la posición: absoluta, que como reconociste no es lo que quieres. Si entiendo lo que estás tratando de hacer, acaba de establecer el ancho, y altura: valores para las imágenes, además de un poco de relleno, tal como tan:

.Thumbnails { 
    width: 100px; 
    height: 100px; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

(de Eric Meyer "Cascading Style Sheets: La guía definitiva" dice "La historia larga y enrevesada del clip significa que, en los navegadores actuales, actúa de manera inconsistente y no se puede confiar en ningún entorno de navegador cruzado.")

Answer 3

Estas son algunas opciones:.

1. Puede utilizar la propiedad de clip para evitar la superposición y crear imágenes en miniatura a la vez: http://www.cssplay.co.uk/menu/clip_gallery.html

2. Puede utilizar los márgenes negativos para separar las imágenes entre sí, y el desbordamiento de crear las miniaturas: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image