Javascript 网站上无限滚动的图像裁剪

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

我现在最好的尝试是在img onload事件中，我运行了一些javascript来实现这一点，但是性能非常差

---

我认为我需要在用户上传图像时裁剪图像，并存储缩略图版本和常规版本。我的问题是，是否有人使用javascript在客户端裁剪图像，但仍然能够保持良好的性能（这意味着滚动不会因此变得急促）

据我所知，您有270x270 px的块，并且希望用图像完全填充它们。尝试将图像移动到背景并使用

演示

div{
宽度：180px；
高度：170px；
背景重复：无重复；
背景尺寸：封面；
}

---

请注意，此解决方案在IE8及以下版本中不起作用。

这很好。我会把它标对的。还有一件小事。无论如何，让图像集中在div.hmm中似乎对我的东西不起作用。以下是我的css的整体外观。主照片{宽度：270px；高度：270px；背景重复：无重复；背景大小：封面；背景位置：中-中；边距：20px；浮动：左；背景：#f9f8fa；位置：相对；溢出：隐藏；-webkit转换：全部。2缓进-出；框阴影：0px 0px 8px rgba（0,0,0,0.45）；-webkit背面可见性：隐藏；背景色：#f9f8fa；}使用以下速记属性

background:#f9f8fa；

覆盖

背景位置

为默认值

0

。尝试将背景规则移到顶部或将其更改为

背景色

。

<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;
}