使いどころ
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にする必要あり。
↧