Javascript 自动图像裁剪

设置一个CMS，我想自动限制上传的图像，不失真，也不设置作为背景的图像，因为我希望网站访问者能够复制图像。这可以用css或javascript实现吗

<div class="outer">
    <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150218160918-stress-super-169.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i.telegraph.co.uk/multimedia/archive/02951/photoshopping-peg_2951334k.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

---

是这个问题的一个粗略的例子。

因此简而言之，目前实现此解决方案的唯一方法似乎是使用背景图像和背景大小：在预大小的div上覆盖

虽然没有得到充分支持，但看起来很有希望的是以下内容

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

及

---

但在此之前，背景图像是最好的方式，尽管不利于搜索引擎优化。

您能否更具体地说明实际问题是什么？那么，问题到底是什么？听起来您在寻找裁剪脚本？很多针对javascript图像裁剪和jquery图像cropI的谷歌搜索结果不希望用户上传所有不同形状和大小的图像，但最终他们会的。因此，我想要一种“自动图像裁剪”的方法，这样它们都将是相同的维度。请参阅此以了解可能的CSS解决方案。另外，RubyonRails标记是不必要的，请删除它。

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />