画像を投稿させるサービスで、ユーザーが推奨サイズ比率ではない画像をアップロードした場合、好みの位置でトリミングさせるやつを考えてみた。TwitterとかFacebookのカバー写真をアップロードした時のアレです。今回はズームとか無しで、縦方向のみの位置調整にしてみました。(画像のwidthは100%)画像をトリミングして保存するわけでなく、単に画像位置を動かして、表示範囲以外は見えなくする方法を取っています。切り取ってしまうと、他のレイアウトで使う時に困ることもあるので、個人的にはこの方法が好みです。自分はRailsを使っているので、こんな感じ。jquery.ui.droppable考え方Rails側はこんな感じ。PostモデルとImageモデルがあって、Postはサムネイル画像を1枚持ちます。image)画像の位置はimage_posでpostsテーブルに保存します。:imageend見た目の例は、こんなのです。CSSは適当なので、環境に合わせて変更してください。}}Javascriptで実装する使い回しが効くように、外部ファイルにしました。値を変更しているだけです。今回はレスポンシブデザインを想定しているので、保存する値はpxでなくて、%にしました。ように挿入すればいいかと。workabroad.jp。