VSCodeで画像(imgタグ)のwidthとheightを自動入力する方法

VSCodeで画像(imgタグ)のwidthとheightを自動入力する方法 HTML / CSS
この記事は約3分で読めます。
スポンサーリンク

どうも上かるびです。

imgタグのwidth/heightの値を入力することでレイアウトシフトが防げる、というのは割と有名なお話です。

ただそのwidth/heightの値をどうやって取得しているのかってあまり話題にならないですよね。

今回はVSCode上で簡単に画像(imgタグ)のwidthとheightを取得できる方法をご紹介します。

ネコーダー
ネコーダー

いくつか条件があるから気をつけてね!

VSCodeのデフォルト機能で取得できる

私も2021年の暮れ頃に初めて知ったのですが、VSCodeのデフォルト機能で画像のwidth/heightの値を取得できます。

上記公式ページにやり方が書いてあります。

手順だけ日本語で説明すると以下になります。

  1. imgタグにカーソルを合わせる
  2. コマンドパレットを開く(Ctrl/Cmd + Shif + P)
  3. “Emmet:イメージサイズの更新”を選択
ネコーダー
ネコーダー

たったこれだけ!?

動作プレビュー

実際にやってみます。

最初使ったときは思わずスタンディングオベーションをしてしまいました👏

実務で使うには厳しい諸条件

歓喜したのも束の間、実はこの機能を使うにはいくつかの条件があります。

  • imgタグのsrcで相対パスをしっかり記述する必要がある(EJS/Pugなどのテンプレートエンジンでは使いにくい)
  • sourceタグには反応しない

詳しく解説します。

imgタグのsrcで相対パスをしっかり記述する必要がある(EJS/Pugなどのテンプレートエンジンでは使いにくい)

しっかりというのは、変数などで置き換えないでという意味になります。

例えばEJSで下記のように画像のパスを変数に入れて使った場合などは、取得できません。

Pugでもダメでした🐶

ただしEJSの場合は変数などに置き換えずにそのまま相対パスを入れた場合に機能します。(Pugはダメ🐶

sourceタグには反応しない

どうやら現状はimgタグのみとなっているようです。

そもそもsourceタグにwidth/heightを指定するのはアレだった気がしますので、理にかなっているのかなと。。。

ネコーダー
ネコーダー

アレって何

以上のことを踏まえて、実務で使うのは厳しそうというのが本音です。。。

width/heightを取得する他の方法

いくつかまとめましたのでご参考ください。

Pugの場合

Pugでimgタグにwidth, height属性を自動で付加する方法

JSでやる場合

【JavaScript】img要素の画像サイズを取得してwidth・heightを自動追加する
本記事では、JavaScriptでimg要素の画像サイズを取得してwidth・height属性を自動で追加する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 画像サイズ

CSS上で取得する場合(Compassの関数)

Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイト
この方法はDartSassでは機能しませんでした(ソースは自分の環境)

CSSの画像(background-imageなど)を取得する場合(VSCode拡張機能)

Image Snippets - Visual Studio Marketplace
Extension for Visual Studio Code - generate image snippets insert to your editor
上かるび
上かるび

他に何か良い方法がありましたら教えていただけると嬉しいです!

コメント

タイトルとURLをコピーしました