1

私は、アップロードされた画像を取得し、CSS で親指用に画像をトリミングするための最善の方法と、それが実行できるかどうかを理解しようとしていました。純粋な CSS で実行できない場合、JavaScript/jQuery で実行する方法は何ですか? 画像のサイズは異なる場合がありますが、画像が中央で正方形になり、収まるように縮小する方法を探しています。以下の例:

この画像は 413 x 300 です。

ここに画像の説明を入力

この画像をポートフォリオ サムの左右からトリミングすると、300 X 300 になります。

ここに画像の説明を入力

次に、サム 200 x 200 またはサムが表示するように設定されている値に合わせて画像を縮小する必要があります。

ここに画像の説明を入力

私の理解を編集#img_preview{width:200px;}して適用すると、次のようになります。

ここに画像の説明を入力

4

4 に答える 4

5

ここに例を示します: http://jsfiddle.net/cnWqQ/5/

次のようなcss：

#img-wrap{
    height:200px;
    width: 200px;
    background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
    background-size: cover;
    background-position:center; 
}

html のように:

<div id="img-wrap"></div>

画像を div の背景として配置することで機能し、すべての画像の形状とサイズで一貫して機能します。

一部の css3 が含まれます。

于 2013-02-28T15:09:00.073 に答える
3

CSS で実行できますが、最新のブラウザーでのみ機能します。

プロパティを使用しbackground-imageます：

<div id="myImageTrimed">
</div>

そしてCSS：

#myImageTrimed {
    background-image: url('img/youImage.jpg');
    background-position: center; /* to make sure it trims the borders */
    background-size: cover; /* As large as possible */
    height: 200px; /* But only 200x200px are shown */
    width: 200px;
}

さらにブラウザの制約がある場合はコメントしてください。

于 2013-02-28T15:06:22.670 に答える
0

CSSwidthを必要な値に設定するだけで、アスペクト比を維持するために高さが自動的に調整されます。

#img_preview{
    width:200px;
}
于 2013-02-28T15:02:29.680 に答える
0

で画像をマスクできますdiv：

あなたのdiv: height:200px; width:200px; overflow: hidden;

あなたのイメージ: position:absolute; height:inherit; margin-left:-15%;

以下のデモを参照してください: http://jsfiddle.net/jRCgP/

于 2013-02-28T15:15:06.010 に答える