CSS剪輯和絕對定位

Question

我正在使用剪輯爲圖庫創建縮略圖。不幸的是，剪輯只能在元素絕對定位時使用。同樣應用於每個img，這當然會使它們在使用一種CSS樣式時彼此坐在一起，像這樣。

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

我該如何將它們相對放置？我只想要基本的行。

Answer 1

我不會推薦純css解決方案。你有沒有考慮過像phpThumb這樣的圖書館？從那裏，你只需要使用下面的CSS：

.Thumbnails{float:left} 

和引用縮略圖最後看起來像這樣：

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

這條線基本上會創建一個100x100的縮略圖，該ZC指定變焦作物（裁剪搭配寬高比和縮略圖庫做了一些非常漂亮的緩存來降低服務器負載

Answer 2

我已經做了一些公平的CSS，我不記得曾經使用甚至看過剪輯。 Misunderstood CSS Clip建議我不是唯一一個：「CSS剪輯屬性必須是CSS中最少使用的屬性之一，這可能是因爲沒有人真正知道何時使用它，它似乎並未在Internet中受支持資源管理器，有些人使用不正確。「

所以不要用剪輯來做。這可以讓你擺脫位置：絕對的，正如你所認識的不是你想要的。如果我理解你想要做什麼，只要設置寬度和高度：對於圖像值，加上一些填充，也許像這樣：

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

（Eric Meyer的「層疊樣式表權威指南」 「漫長而複雜的剪輯歷史意味着，在目前的瀏覽器中，它的行爲方式不一致，不能在任何跨瀏覽器環境中依賴。」）

Answer 3

這裏有幾個選項：

1. 可以使用夾屬性，以防止重疊，並在同一時間創建縮略圖： http://www.cssplay.co.uk/menu/clip_gallery.html

2. 可以使用負利潤率的圖像彼此分開，並且溢出來創建縮略圖： http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image