1

我有一个页面使用无限滚动在 270 x 270 div 中显示一堆照片。我正在尝试裁剪这些图像，以便它们保持纵横比。我已经使用 overflow: hidden 和一些类似的调整让它在 css 中工作。但是如果图像更小，我希望它放大，如果它更大，我首先想让它更小。

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

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

4

1 回答 1

2

据我了解，您有 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-16T16:57:49.850 回答