超カンタン！CSSで画像を自在に切り抜く方法

どうも！Hiroyukiです！

今日は、
###「CSSで画像を自在に切り抜く方法」
をご紹介しますっ！

つまり、
###好きな位置で画像を切り抜いて表示できるっ！
という、素ん晴らしぃ〜ものです（＾o＾）
###僕もやってみたら、超カンタンで驚きでした（笑）

実際の利用例は、下記の通りです。

#元となる画像のアップロード機能

#切り抜き後の画像表示　※切り抜き高さを「任意」で指定できますっ！

#元となる画像アップロード機能を実装

HTML

<h2>トップ画像をアップ</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}">
        <figcaption>現在のチャンネルトップ画像（編集前）</figcaption>

</figure>

<form method="POST" action="/storeTop" enctype="multipart/form-data">

         {{ csrf_field() }}

         <input type="file" name="photo" class="btn">

　　　　　<input type="submit" value="更新する？" class="button btn btn-primary">
             　
</form>

コードだとこんな感じです。

###アップした画像を表示させる　imgタグ の src = "〜〜" の中身は、当然自由なパスを入れて下さい！

ここでは、PHP/Laravelを使って、S3というAWSのストレージ機能のパスを示しているんですが、
ご自身が画像を保存する先のパスを入れて貰えれば、OK!!

#CSSを使って画像を切り抜く！

はい、ここから本題ですね！

HTML

<h2>トップ画像を編集</h2>

<figure>

        <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}" style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;">
        <figcaption>現在のチャンネルトップ画像（編集済）</figcaption>

</figure>

<form method="POST" action="/topTrim">
   <div class="form-group">
     <label>切り取る位置（高さ）を 0 ~ 100 の数値で入力</label>
     <div>
          <input type="number" name="top_trim" required>
          <div>例）画像の一番上を切り取る : 0 を入力</div>
          <div>   画像の一番下を切り取る : 100 を入力</div>

     </div>
   </div>

   <input type="submit" value="更新する？" class="btn btn-primary">

</form>

imgタグ の src = "〜〜" で、上のアップした画像を表示させるものと「同じパス」を持ってきて、
それを切り抜きます！

###ボクのページの場合、Twitterのマイページのトップ画像みたいに、横に細長〜く切り抜きたいので、
（上記コードも横に細長〜いため、右にスクロールしないと分かりづらいかも知れませんが（笑））

imgタグに

style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;

"width:1200px; height:200px" と、任意で「表示させたい画像幅・高さ」を書いています！

で、ここからがポイント！

###"object-fit:cover;"と記載することで、

###「画像のタテヨコ比を保持したまま、トリミングが可能となりますっ！！」
######初めてできたとき、「スッゲぇ〜〜」ってなりました(笑)

更に、
###"object-position: 横の位置% 縦の位置%;"と追記すれば、

###「横の位置＝一番左から○%の位置で切り取る」
###「縦の位置＝一番上から○%の位置で切り取る」

なんていう、すごく融通が効く、、、ステキすぎることが出来ちゃいま〜す！！（感涙）

このCSSの設定方法も、なかなか奥が深いので、ボクが書いたものじゃございませんが
下記のサイトも参考にしてみて下さい〜

###1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
###https://www.webcreatorbox.com/tech/object-fit

で、ボクのページでは、上記機能を更に少し発展させて、
###画像を切り取る高さ（縦の位置○%）をユーザーが好きな高さに設定できるようにしてます＾＾

つまり、コードをみて頂ければ分かりますが、

object-position:0% {{ $user->top_trim }}%;

という風に、
###「%」の前の数値を変数として、任意の値（高さのパーセンテージ）を
###持ってこれるようにしています！！

ここでは、Laravelの変数で表現していますが、当然JavaScriptの変数など、他の変数でもOKですよ〜！

###実際のサービス上で、上記機能を試して確認して頂くのが一番分かりやすい
と思いますんで、下記にボクのサービスのリンクを載せておきまーす

###ボクが作ったオリジナルWebサービス（下記リンク）
###http://youtubematome.herokuapp.com

新規ユーザ登録　→　チャンネル設定　→　ページ真ん中らへんの「トップ画像を編集」

で実際に使ってみることが出来まっす！！

宜しければどうぞ〜〜