自动图像裁剪[关闭]答案

【问题标题】：Auto image cropping [closed]自动图像裁剪[关闭]
【发布时间】：2023-03-10 23:08:01
【问题描述】：

设置一个 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>

css

.outer{
    width:30%;
    float:left;
    margin-right:3%;
}

https://jsfiddle.net/tonytansley/9y09b4hh/ 是该问题的一个粗略示例。

【问题讨论】：

您能否更具体地说明实际问题是什么？
那么，问题到底是什么？
听起来您正在寻找裁剪脚本？ “javascript imagecrop”和“jquery imagecrop”的大量谷歌搜索结果
我不希望用户上传所有不同形状和大小的图像，但最终他们会这样做。所以我想要一种“自动图像裁剪”的方法，这样它们的尺寸都一样
请参阅SO Answer 了解可能的 CSS 解决方案。另外ruby-on-rails标签是不必要的，请去掉。

标签： javascript html css

【解决方案1】：

因此，简而言之，目前实现此解决方案的唯一方法似乎是在预先确定大小的 div 上使用 background-image 和 background-size:cover。

看起来很有希望（尽管不完全支持）是以下...

.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" />

但在那之前，背景图片是最好的（尽管对 SEO 不友好）。

【讨论】：