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

前提・実現したいこと

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

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

行動規範の内容に同意します

回答2件

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

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

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

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

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

投稿2020/03/21 00:55

hatena19

総合スコア34084

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

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

CSS
1.keyvisual {
2  background-image: url(https://www.pakutaso.com/shared/img/thumb/SHI1987004.jpeg);
3  background-size: cover;
4  background-position: center center;
5  background-repeat: norepeat;
6  
7  width: 100%;
8  height: 400px;
9}