javascript - 画像をトリミングする CSS/JavaScript

Question

cssまたはjavascriptを使用してトリミングする画像の特定の場所をターゲットにする方法、大きなスクリプトを使用しない簡単な方法、

前の写真:

次の画像の強調表示された場所を表示したい:

正確に強調表示されているわけではありませんが、一番上からである必要はないことを説明しようとしているだけです。特定の画像スケールを選択したいのですが、 サイズを変更する方法はトリミング後ですか?

Answer 1

1 つのアプローチはoverflow: hidden、画像を子として持つ要素を使用することです。これは、元の要素のコンテキスト内に完全に配置されます。その結果、overflow: hidden要素のサイズによって画像がマスクされます。

アプローチの例を次に示します。

HTML

<div id='crop-the-cats'>
    <img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>​

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    overflow:hidden;   
    position:relative;
}

#crop-the-cats img {
    position: absolute;
    top: -60px;
    left: -70px;
}

http://jsfiddle.net/Da9CT/を参照

別のアプローチは、画像を画像の背景として使用し、次を使用して再配置することbackground-positionです。

HTML

<div id='crop-the-cats'></div>​

CSS

#crop-the-cats {
    width: 100px;
    height: 80px;
    background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
    background-position: -50px -60px;
}

http://jsfiddle.net/Da9CT/2/を参照

Answer 2

javascript / css を使用して画像をトリミングすることはできませんが、オーバーフローを非表示にして要素内に配置することはできます: http://jsbin.com/ebenem/1/edit

それが役立つかどうか教えてください！