自動圖像裁剪

-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

自動圖像裁剪

回答

相關問題