在網站上爲無限滾動修剪圖像

我有一個使用無限滾動的頁面在270 x 270格中顯示一堆照片。我試圖裁剪這些圖像，以便它們保持縱橫比。我已經得到它在CSS中使用溢出：隱藏和一些像這樣的調整。但是，如果圖像較小，我希望它變大，如果它更大，我首先想讓它變小。在網站上爲無限滾動修剪圖像

我現在最好的嘗試是在img onload事件中，我運行了一些JavaScript，但是性能非常糟糕。

我在想，我需要在用戶上傳圖片時裁剪圖片，並存儲縮略圖版本和常規版本。我的問題是有人做過javascript的圖像客戶端裁剪，仍然能夠保持良好的性能（意味着滾動並沒有因爲它而變得生澀）

來源

2013-01-16 WallMobile

據我所知，你有塊270x270像素，你想完全填充它們與圖像。嘗試將圖像移至背景並使用background-size:cover。

演示http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div> 
<div style="background-image:url(http://placekitten.com/200/100)"></div> 
<div style="background-image:url(http://placekitten.com/200/200)"></div> 

div { 
    width:180px; 
    height:170px; 
    background-repeat:no-repeat; 
    background-size:cover; 
}

注意，在IE8及以下不工作這一解決方案。

來源

2013-01-16 16:57:49 antejan

這太好了。我會標記它是正確的。還有一件小事情。無論如何，圖像居中在div中。 – WallMobile

添加'background-position：center' http://jsfiddle.net/heuku/2/ – antejan

嗯，似乎並不適合我的東西。這裏是我的總CSS樣子.home-photo { width：270px; height：270px; background-repeat：no-repeat; background-size：cover; background-position：center center; margin：20px; float：left; background：＃f9f8fa; 位置：相對; 溢出：隱藏; -webkit-transition：所有.2s緩出來; box-shadow：0px 0px 8px rgba（0,0,0,0.45）; -webkit-backface-visibility：hidden; background-color：＃f9f8fa; } – WallMobile

在網站上爲無限滾動修剪圖像

回答

相關問題