1

いくつかのサムネイル画像を表示するページがあります。ユーザーがこれらの画像にマウスを合わせると、画像全体を示すモーダルウィンドウが表示されます。

問題：スペースを節約するために、画像の1つのバージョン（元のバージョン）をサーバーに保存し、クライアント側で「動的に」サムネイルを作成します。おそらくjavascriptを使用してトリミング（サイズ変更は不要）を行います。 /jquery。これは可能ですか？

インタラクティブなトリミングツールのような多くの機能を備えているように見えるjqueryトリミングプラグインを見たことがあります（試していません）。これらの機能は必要ありません。javascriptを使用してトリミングしたいだけです。ほとんどの場合、画像の中央で重力を使用してトリミングします。

4

2 に答える 2

2

css を使用して、中央の部分から画像を切り取ることができます。

デモを見る

<div class="content">
<img src="http://www.letsgodigital.org/images/producten/2086/testrapport/nikon-p90-picture.jpg" width="400" height="400" />
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​.content {
width:200px;//require width
height:200px;//require height
overflow:hidden;    
}
.content img {
margin-left:-50%;
 margin-top:-50%;   
}

</p>

于 2012-07-06T04:08:29.877 に答える
1

切り抜きに相当するものを取得するには、1つのcssソリューションはoverflow:hidden、各フルサイズの画像の外部コンテナーで使用することです。

50pxx50pxのサムネイルが必要だとします。

<div id="thumbnail_1" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>  <!-- this is the full-size image -->
</div>

<div id="thumbnail_2" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>

<div id="thumbnail_3" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>
于 2012-07-06T03:31:24.043 に答える