2011-06-30 28 views
8

Tôi muốn hiển thị một trang hình thu nhỏ. Hình thu nhỏ là hình ảnh nghệ thuật do người dùng tải lên. Mỗi hình ảnh có chiều rộng hạn chế, nhưng không phải là chiều cao bị ràng buộc, điều này là hiển thị hình ảnh đầy đủ mà không cần cắt xén.Làm cách nào để tự động tạo ảnh cắt dán (lưới không có khoảng trống) của hình ảnh, nơi hình ảnh có chiều cao khác nhau?

Tôi muốn các hình ảnh liên kết với nhau mà không có khoảng trống ở giữa. Số lượng cột không cố định: Nếu tôi mở rộng hoặc thay đổi kích thước trang, hình ảnh sẽ chuyển thành số cột chính xác.

float:left 

là ALMOST, những gì tôi muốn. Trừ khi có những hình ảnh cao trong trang tôi nhận được gapped này nhìn:

enter image description here

Làm thế nào để loại bỏ những khoảng trống?

+0

Bạn có thể xác định 4 bảng riêng biệt (mỗi với một cột) liên tiếp :) –

+0

Để có được cái nhìn mà bạn muốn, bạn sẽ phải sử dụng định vị tuyệt đối. Bạn có thể viết kịch bản của riêng bạn hoặc sử dụng một plugin như một đề xuất. – jchavannes

Trả lời

6

Nếu bạn chỉ muốn thực hiện điều này trong css, bạn phải tạo các div cho mỗi cột và làm nổi bật các cột đó (nhưng nó làm rối trật tự các hình ảnh).

Hoặc, bạn có thể sử dụng plugin jquery như this one.

+0

cảm ơn. plugin xây dựng làm những gì tôi muốn. Ngoại trừ việc tôi sẽ ưu tiên thứ tự ban đầu để đi từ trái sang phải mỗi hàng. Masonry làm điều này cho hàng đầu tiên, nhưng đối với hàng thứ 2 nó dường như tùy ý phù hợp với hình ảnh tiếp theo theo thứ tự vào khoảng cách lớn nhất mà nó có thể tìm thấy. Mặc dù nói chung bạn stil có được thứ tự là những người đầu tiên "gần" đầu trang, nhưng không nhất thiết phải từ trái sang phải. – Homan

+0

Một khả năng để tránh làm rối tung những hình ảnh là có một bộ đếm, cho mỗi hình ảnh thứ tư bạn đăng nó trong div nhất định. Vì vậy, bạn có truy cập này và một tuyên bố trong khi đi 1,2,3 và 4 .... khi số truy cập 1, bạn thêm vào div 1, v.v., và khi nó chạm 4, ​​bạn chỉ cần thêm số trở lại 0 :) Đã giải quyết được vấn đề! –

9

Bạn không chắc chắn về mức độ cần thiết của CSS, nhưng một lựa chọn tốt thì không kém. Bạn có thể sử dụng masonry.js để giúp điều đó.

http://css-tricks.com/seamless-responsive-photo-grid/

+0

Đây phải là câu trả lời được chọn! – vsync

+0

Tôi biết bạn đã trả lời câu hỏi này một thời gian trước đây, nhưng bạn đã bao giờ tìm ra cách hiển thị hình ảnh từ trái sang phải thay vì từ trên xuống dưới? – SISYN

Các vấn đề liên quan