自动图像裁剪

-1

设置一个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/是问题的一个粗的例子。

来源

2015-07-28 Tony Ray Tansley

对于实际问题是什么，你能更具体一些吗？ –

那么，究竟是什么问题呢？ –

听起来像你正在寻找裁剪脚本？很多谷歌搜索结果为“javascript图像裁剪”和“jquery图像裁剪” – henry

因此，简而言之，目前实现此解决方案的唯一方法是使用background-image和background-size：覆盖预先设置的div。

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

.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友好）的方式来做到这一点。

来源

2015-07-28 14:04:40

自动图像裁剪

回答

相关问题