CSSのcontentプロパティで画像を指定してサイズ調整する方法

使いどころ

CSSの中で、画像URLの指定とサイズの指定を同時に行いたいとき。
@media screen and ( max-width: 600px )を使ってpcとモバイルで画像を切り替えたいとき。
imgの「widthとheightが効かない」とき。

方法

display: inline-block;が重要です。

index.html

<a href="https://www.google.com/" target="_blank" rel="noreferrer" >
    <img alt="ロゴだよ" id="mylogo"/>
</a>

style.css

# mylogo{

    content: url("./svg/my_logo_line.svg");
    display: inline-block;
    width: 6.5rem;
    height: auto;
}

備考

セマンティックデザイン的に、ロゴなのでbackground-imageではなく、imgにする必要あり。

Excelsior!