どうも上かるびです。
imgタグのwidth/heightの値を入力することでレイアウトシフトが防げる、というのは割と有名なお話です。
ただそのwidth/heightの値をどうやって取得しているのかってあまり話題にならないですよね。
今回はVSCode上で簡単に画像（imgタグ）のwidthとheightを取得できる方法をご紹介します。
ネコーダー
いくつか条件があるから気をつけてね！
Contents
VSCodeのデフォルト機能で取得できる
私も2021年の暮れ頃に初めて知ったのですが、VSCodeのデフォルト機能で画像のwidth/heightの値を取得できます。
上記公式ページにやり方が書いてあります。
手順だけ日本語で説明すると以下になります。
- imgタグにカーソルを合わせる
- コマンドパレットを開く(Ctrl/Cmd + Shif + P)
- “Emmet:イメージサイズの更新”を選択
ネコーダー
たったこれだけ！？
動作プレビュー
実際にやってみます。
最初使ったときは思わずスタンディングオベーションをしてしまいました👏
実務で使うには厳しい諸条件
歓喜したのも束の間、実はこの機能を使うにはいくつかの条件があります。
- imgタグのsrcで相対パスをしっかり記述する必要がある（EJS/Pugなどのテンプレートエンジンでは使いにくい）
- sourceタグには反応しない
詳しく解説します。
imgタグのsrcで相対パスをしっかり記述する必要がある（EJS/Pugなどのテンプレートエンジンでは使いにくい）
しっかりというのは、変数などで置き換えないでという意味になります。
例えばEJSで下記のように画像のパスを変数に入れて使った場合などは、取得できません。
|
1 2 3 4 5 |
<% const path="./src/images/"; %> <body> <img src="<%= path %>meat.jpg" alt=""> </body> |
Pugでもダメでした🐶
ただしEJSの場合は変数などに置き換えずにそのまま相対パスを入れた場合に機能します。（Pugはダメ🐶
sourceタグには反応しない
どうやら現状はimgタグのみとなっているようです。
そもそもsourceタグにwidth/heightを指定するのはアレだった気がしますので、理にかなっているのかなと。。。
ネコーダー
sourceタグは自分で調べて値を入力しよう…
以上のことを踏まえて、実務で使うのは厳しそうというのが本音です。。。
width/heightを取得する他の方法
いくつかまとめましたのでご参考ください。
Pugの場合
Pugでimgタグにwidth, height属性を自動で付加する方法
zenn.dev
JSでやる場合
【JavaScript】img要素の画像サイズを取得してwidth・heightを自動追加する
本記事では、JavaScriptでimg要素の画像サイズを取得してwidth・height属性を自動で追加する方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 画像サイズ
into-the-program.com
CSS上で取得する場合（Compassの関数）
Compassの画像の関数（Image Helpers）| Web制作者のためのSassの教科書 - 公式サポートサイト
book.scss.jp
CSSの画像（background-imageなど）を取得する場合（VSCode拡張機能）
Image Snippets - Visual Studio Marketplace
Extension for Visual Studio Code - generate image snippets insert to your editor
marketplace.visualstudio.com
上かるび
他に何か良い方法がありましたら教えていただけると嬉しいです！
コメント