JavaScriptでヘッダー画像の表示範囲を決める

Question

前提・実現したいこと

Twitterをお使いの方じゃないとわからない説明だと思うのですが、
Twitterのヘッダー機能にあるような自分で好きなヘッダー画像の表示範囲を決められるような機能をJavaScriptで作りたいのですが、その場合どのような処理をすればいいのか、わかりません
複雑な処理が必要になってくるのでしょうか、簡単に作れるでしょうか

画像のトリミングができる「document.getElementById("myImg").style.objectFit = "";」など使うのでしょうか？
他に何かあれば教えていただきたいです

Answer 1

自分のサイトのヘッダー用の画像をトリミングしたいということなのか、
自分のサイトに、ユーザーが画像をアップロードしてトリミングできる機能(Twitterのヘッダー機能と同等のもの)を実装したいということなのか、
どちらでしょうか。

前者なら、画像ソフトでトリミングするか、そのような機能を提供しているサイトを利用すればいいでしょう。
「オンライン 画像トリミング」で検索すれば数多くのサイトが見つかります。

後者なら、下記のjQueryプラグインの cropper を使うといいでしょう。
使い方は、下記が参考になるかと。

画像を自由にトリミングできるjQueryプラグイン「Cropper」 | Minory

jQueryで画像トリミングを実装してみよう | ジーニアスブログ

Answer 2

HTML + CSSのほうが楽なように思われます。

<div class="keyvisual"></div>

.keyvisual {
  background-image: url(https://www.pakutaso.com/shared/img/thumb/SHI1987004.jpeg);
  background-size: cover;
  background-position: center center;
  background-repeat: norepeat;
  
  width: 100%;
  height: 400px;
}