在网站上为无限滚动修剪图像

我有一个使用无限滚动的页面在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

在网站上为无限滚动修剪图像

回答

相关问题