CSSのvwとvhについて

CSS	意味
vw	ビューポートの幅に対する割合
vh	ビューポートの高さに対する割合

viewportとは

viewport(ビューポート)とは表示領域のことで、PCなどのブラウザではブラウザウィンドウの表示領域がそのままビューポートになります。
基準となるビューポートの幅をvwで表すと100vwで、1vwは1％と同じ長さとなる。
例）幅が300pxの場合、1vwは3px

％を使わない理由

% の場合は、必ずしもビューポートの幅が基準になるとは限らないから。
もし画像が div という要素の中にあれば、そのdiv要素の幅に対する割合で計算されます。(親要素に紐づく)
vw, vh にはそのような紐付けがないので、画像の幅をビューポートの高さを元に指定することが出来ます。