通常、javascript または css3 (background-size を使用) で画像のサイズを変更すると、中心点から画像が引き伸ばされます。どこにでもある可能性のある一点から引き伸ばしたり歪めたりする画像が必要です。動的になるので、別の画像を使用することに頼りたくありません。
これが私が何を意味するかを示す写真です:
うまくいけば、そこに答えがあります!
通常、javascript または css3 (background-size を使用) で画像のサイズを変更すると、中心点から画像が引き伸ばされます。どこにでもある可能性のある一点から引き伸ばしたり歪めたりする画像が必要です。動的になるので、別の画像を使用することに頼りたくありません。
これが私が何を意味するかを示す写真です:
うまくいけば、そこに答えがあります!
この効果を実現するには、いくつかのオプションがあります。
「正しい」方法は、キャンバスを使用して画像を描画することです。キャンバスを使用して画像を個別に歪ませる
もう 1 つの方法は、CSS 変換スキューを使用して効果を偽造することです。 http://developerdrive.com/demo/skewing_elements/skewing_elements.html
背景画像のように見せるには、「overflow: hidden」を使用して要素内でこれを行います。
あなたがリンクしている画像からあなたが何を望んでいるのかさえ私には明らかではありません. 歪ませたいですか?また、歪みは均一ですか?
あなたがしていることは、いくつかの画像の中心から切り取られた(またはおそらく長方形)のセットを減少させて描画し、それらを「キャンバス」に描画することで近似できると推測します(html5用語ではなく一般的な用語を考えてください)各クリッピングの中心に新しい座標が与えられます。画像の一部を複数回再描画するよりも、これを描画するより速い方法があるかもしれません.