タグライン div 内でロゴのサイズと位置を適切に設定できない – HTML と CSS – SitePoint フォーラム

皆さん、こんにちは。

最近ブランドを変更し、ソーシャルメディアやディレクトリリストなどを更新する過程で、最小サイズの画像が必要な特定のインスタンスでは私のロゴが機能しないことがわかりました。 そこで、新しいロゴを思いついたのですが、Web サイト上で正しく動作させるのに苦労しています。

新しいロゴと古いロゴのスクリーンショット。

オリジナルのようにロゴを左に傾けることはできません。 画像のサイズ変更とトリミング、およびbackground-positionプロパティを試してみました。 ここのボックスモデルについて何が理解できないのかわかりません。

関連するマークアップと CSS:

	

		DrumDrTom-
		Hand drum repair, restoration and sales 
	

	

#tagline {
	font-size:90%;
	background:#DEF url(Images/h1Background.png) top left repeat-x;
	color:#00F;
	border-top:0.22222em solid #7AD; /* 2px */
}

#tagline span {
    height:7.1428571%;
	display:block;
	/* font:bold 2.3vmax/2.39vmax 'Sonsie One', verdana,helvetica,sans-serif; */ /* 36px/38px  */
	/* text-transform:uppercase; */
	padding:0.55555em 0 0.27777em 2.77777em; /* 20px 0 10px 100px */
	background:url(Images/h1Logo.png) left no-repeat;
	/* background-size:6.4vmax; */ /* 10.5042017% 6.25% */
}

#tagline small {
    height:7.1428571%;
	display:block;
	padding:0.3829em 0.78215em; /* 12px */
	/*font:bold italic 0.95vmax/0.95vmax verdana,helvetica,sans-serif;*/ /* 125%/125%  */
	color:navy;
	background:#BED8F3 url(Images/taglineBackground.png) top right repeat-y;
	border:solid #7AD;
	border-width:0.15em 0; /* 2px */
}

1500pxl から 100plx およびその中間のサイズにサイズ変更しました。 可能な限りトリミングし、周囲にスペースをさらに追加しました。 そして、上、左、右、下をトリミングしました。 トリミングすると、画像がページ上で拡大し、おそらくスペースを埋めることに気づきました。

提案をお願いします。