Clip CSS và Định vị Tuyệt đối

Question

Tôi đang sử dụng clip để tạo hình thu nhỏ cho thư viện. Thật không may, clip chỉ có thể được sử dụng khi một phần tử được định vị hoàn toàn. Áp dụng như nhau cho mỗi img, điều này tất nhiên làm cho họ tất cả ngồi với nhau trong khi sử dụng một phong cách CSS, một cái gì đó như thế này.

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

Làm cách nào tôi có thể định vị chúng tương đối với nhau? Tôi chỉ muốn các hàng cơ bản.

Answer 1

Tôi sẽ không đề xuất giải pháp css thuần túy. Bạn đã xem một thư viện như phpThumb chưa? Từ đó bạn chỉ cần sử dụng css sau:

.Thumbnails{float:left} 

Và tham chiếu đến các hình nhỏ kết thúc lên trông như thế này:

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

dòng đó về cơ bản sẽ tạo ra một hình ảnh thu nhỏ 100x100, các ZC quy định cụ thể một vụ mùa zoom (cắt để phù hợp với tỉ lệ, và thư viện thu nhỏ hiện một số bộ nhớ đệm khá tiện lợi để giảm tải máy chủ

Answer 2

Tôi đã thực hiện một chút công bằng về CSS và tôi không nhớ đã từng sử dụng hoặc thậm chí là xem clip. Misunderstood CSS Clip gợi ý tôi không phải là người duy nhất: "Thuộc tính CSS clip phải là một trong những thuộc tính được sử dụng ít nhất trong CSS. Có thể là do không ai thực sự biết khi sử dụng nó, nó dường như không được hỗ trợ trên Internet Explorer và một số người sử dụng nó không chính xác. "

Vì vậy, đừng làm điều đó bằng clip. Điều đó cho phép bạn thoát khỏi vị trí: tuyệt đối, mà bạn nhận ra không phải là thứ bạn muốn. Nếu tôi hiểu những gì bạn đang cố gắng để làm, chỉ cần đặt width: và height: giá trị cho những hình ảnh, cộng với một số đệm, có lẽ như vậy:

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

(Eric Meyer "Cascading Style Sheets: The Definitive Guide" “Lịch sử clip dài và phức tạp có nghĩa là, trong các trình duyệt hiện tại, nó hoạt động theo những cách không nhất quán và không thể dựa vào bất kỳ môi trường trình duyệt chéo nào.”)

Answer 3

Dưới đây là một vài lựa chọn:.

1. Bạn có thể sử dụng thuộc tính clip để ngăn chặn sự chồng chéo và tạo hình thu nhỏ cùng một lúc: http://www.cssplay.co.uk/menu/clip_gallery.html

2. Bạn có thể sử dụng lợi nhuận tiêu cực để tách hình ảnh từ mỗi khác, và tràn để tạo ra các hình thu nhỏ: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image