1

html / cssのみを使用して画像のサイズ変更、トリミング、中央揃えを行う方法はありますか？（imgタグまたはcssスプライト）

たとえば、500x500ピクセルの画像がある場合、

  1. 250x250ピクセルの画像にサイズ変更したい

  2. 実際の表示画像を100x100にしたいのですが、それでも250x250サイズの画像の縮尺を維持しています。

  3. 画像の中心をx、yの位置にします。

それはhtml/cssだけで可能ですか、そうでない場合は、javascriptでそれを実行することをどのように提案しますか？

編集-動靜能量：

（2）の場合、拡大縮小された画像が200x200になり、可視画像を100x100にしたいとします。つまり、画像の縮尺と解像度を200x200にしたいのですが、可視画像を100x100、つまり表示画像は座標x、y：0,0になります。0,100; 100,0; 100,100; 200x200の画像の。申し訳ありませんが、私はこれを説明するのが苦手です。

4

3 に答える 3

4

更新： http：//jsfiddle.net/LTrqq/5/の例

にとって

  1. CSSwidthと要素heightに使用できます<img>
  2. これは（1）で実行でき、この画像をdivに配置しposition: absolute、を指定して、を別のdivに配置しtopます。この外側のdivは、、、およびleftposition: relativewidth: 100pxheight: 100pxoverflow: hidden
  3. （2）と同じですが、目的topのleft値があります。

position: relative（2）の外側のdivには、ドキュメント全体ではなく、この外側のdivに対して内側のdivを配置する必要があるためです。

topとの場合は、例のleftようになります。top: -50px; left: -50px

于 2012-11-17T16:59:52.787 に答える
0

これを頭のてっぺんからやっただけですが、完全に正確ではないにしても、ほぼそこにあるはずです。-X座標と-Y座標は、クロップオフセットに到達するためのものです。たとえば、20x30からトリミングする場合は、-20pxと-30pxにします。

<style>
    #crop { width: 100px; height: 100px; display: block; overflow: hidden; position: relative; }
    #crop img { position: absolute; left: -X; top: -Y; }
</style>

<div id="crop">
    <img src="500x500.jpg" width="250" height="250">
</div>

ただし、中央に配置する必要があり、クロップコンテナ内の画像のサイズがわかっている場合は、代わりに次のCSSを使用できます。

#crop img { position: absolute; left: 50%; top: 50%; margin: -125px 0 0 -125px; }

125pxは250の半分なので、中央に配置する必要があります。

于 2012-11-17T17:07:02.930 に答える
0

画像のサイズを任意の寸法に定義してから、それをdivに配置し、オーバーフローを非表示にして、クロップルックを実現できます。ただし、実際に画像を切り抜いて、誰かが切り取って拡大縮小した画像のコピーをダウンロードしたい場合は、http：//deepliquid.com/projects/Jcrop/demos.phpをチェックしてください。

ただし、PHPを試すことができる場合は、http：//www.binarymoon.co.uk/projects/timthumb/ は非常に使いやすく、サーバーに配置してimgタグsrcを指定するだけです。例：<img src = "/ timthumb.php？mycat.jpg＆h = 250＆w = 250" />

于 2012-11-17T18:45:00.850 に答える