0

私は、大学向けに大型テレビに表示されるシステムを開発しました。これは、現在および今後のクラスを表示します。そのクラスがどこにあるかを識別するために、名前と画像の組み合わせを使用します。アイデアは、任意の (許可された) ユーザーがそれぞれの写真で教室を追加できるということです。

最初に JQuery と PHP を使用して開発しました。ユーザーは、DIV 背景としてページに表示される画像をアップロードします。次に、ユーザーはその画像のサイズを変更して、より適切な場所に移動できます。

background-position css タグを使用して画像を移動し、background-sizeをスケールに使用します。システムはすべて Web で開発されているため、ここまではすべてうまく機能します。

JQuery アニメーションのパフォーマンスの問題のため、HTML から移行する必要がありました (私のコンピューターでは問題なく動作しますが、使用したい古いものではそれほどうまく動作しません)。私は仕事をするためにpyhtonを選びました。

これらの background-position と size を python に適合させる必要があるため、画像全体が表示されません。そのために、まず PHP を使用して画像を処理し、トリミングしてサイズを変更することにしました。運が悪かったので、ウェブで読んだ後、なんとかこれを生成することができました。

最後に問題です。それでも、動作が異なるように見えるため、CSS 値をクロップ X、Y、およびスケール値に適切に変換する方法をまだ見つけることができませんでした。

ps .: 説明用の 4 つの画像リンクを投稿するつもりでしたが、残念ながらできません...

私がやりたいことを要約するために編集します：

CSS スタイルの div を JPG (または png w/e) 画像に変換します。私が開発した画像のサイズ変更/トリミングのコメントのリンクを確認してください。

画像:

4

1 に答える 1

0

css を使用した画像のサイズ変更の主な概念は非常に単純です。

100x50 の画像を 77 幅に縮小したいとします。

.resize-x { width: 77px; height: auto;  }

height: auto は、指定された幅に従って画像の高さをラップします。ここではこれについて大きな秘密はありません。

「クロップ」に関しては、オーバーフローが隠されているコンテナでクロップを偽造し、その周りに画像を移動できます。

<div class="frame">
   <img class="resize-x" src="myimg.jpg">
</div>

そしてcssの場合：

.frame {
  width: x; height: x;
  overflow: hidden;
}

あなたの質問が正しいかどうかわかりませんが、お役に立てば幸いです。

于 2013-02-07T13:12:12.647 に答える