Question

我有一个页面使用无限滚动显示270 x 270 div中的一堆照片。我试图将这些图像裁剪下来，以便保持它们的宽高比。我已经使用overflow：hidden和一些类似的调整来使用它在css中工作。但是，如果图像较小，我希望它增大，如果它更大，我首先要把它缩小。

我现在最好的尝试是在img onload事件中，我运行了一些执行此操作的JavaScript，但性能非常糟糕。

我想我需要在用户上传图像时裁剪图像，并存储缩略图版本和常规版本。我的问题是有没有人在javascript中做客户端裁剪图像仍能保持良好的性能（意味着滚动不会因为它而变得生涩）

Answer 1

据我所知，你有块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及更低版本中使用。

图像裁剪在网站上无限滚动

1 个答案: