サイト名を画像で表示したレイアウト

サイト名を画像のみで表示したレイアウト

HTML

<div class=”header”>
<h1><a href=”#”><img src=”site.png” alt=”SAMPLE” class=”logo”></a></h1>
</div>

CSS

.header {
padding: 20px;
background-color: #9eb5d1;
}
.header h1 {
margin:0;
font-size: 20px;
line-height: 1;
}
.header h1 a {
color: #000;
text-decoration: none;
}
.header p {
margin: 8px 0 0 0;
font-size: 12px;
line-height: 1;
}
.header .logo {
max-width: 100%;
height: auto;
border: none;
}

親要素<div>のコンテンツエリアが画像の横幅よりも小さくなった場合には、コンテンツエリアに合わせて画像を縮小して表示します。そのためmax-widthで横幅を100％、heightで高さをautoにしています。横幅はmax-widthで指定することにより、画像のオリジナルサイズの横幅（ここでは300px)以上に拡大されるのを防ぐことができます。

わからないことはプロフェッショナルから学ぶのが一番