ブートストラップのロゴは反応しません

Question

私は画面サイズを小さくすると、ロゴは非常に小さく、携帯電話でも非常に大きくてもデスクトップ上で作業し、BLURRYに見えます。タブレットを含め、すべての画面サイズでロゴを流暢にするにはどうすればよいですか？ロゴのサイズは793 x 150ピクセルで、幅の広いロゴです。このサイズはサーバー上にアップロードされたものですが、実際のサイトではそれほど小さくないので、navbarに収まります。

ロゴは、このようにHTMLに追加されます。

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example"></a>

CSS：

header .navbar-brand { 
 
    padding-top: 7px; 
 
    padding-bottom: 7px 
 
} 
 
header .navbar-brand>img { 
 
    height: 46px 
 
} 
 
header .navbar-brand>img { 
 
     height: auto; 
 
     width: 135px 
 
}

Answer 1

imgタグにimg-responsiveクラスを追加します。必要に応じてタグを固定するための幅を設定します。

<a class=navbar-brand href=http://example.com/><img src="http://example.com/resources/imgs/logo.png" alt="Example" class="img-responsive"></a> 

CSS：

.navbar-brand { 
    max-width: 60px; 
} 

クラス、それは親要素にうまくスケールするようにimg-responsive画像にmax-width: 100%;, height: auto; and display: block;を適用します。

は、ここでそれについて詳しく読む：あなたのサイトを見て

http://getbootstrap.com/css/#images-responsive

を次の変更を行います。

は

のcustom.cssライン699

header .navbar-brand > img { 
    height: 200px; 
} 

からコードを削除します

style.cssに5105

.navbar-brand > img { 
    display: block; 
} 

使用この：

のstyle.css 2091

.navbar-brand { 
    float: left; 
    padding: 12px 15px; 
    font-size: 19px; 
    line-height: 21px; 
    height: 62px; 
    max-width: 200px; 
    display: table; 
} 

編集HTML：

<a class="navbar-brand" href="http://soldmymac.com/"><span><img src="http://soldmymac.com/resources/imgs/logo.png" alt="Sold My Mac" class="img-responsive"></span></a> 

とCSSを追加します。

.navbar-brand span { 
    display: table-cell; 
    vertical-align: middle; // This will keep the logo vertically in the middle 
} 

最後のもの....

LEARN CSSあなたは時間がかかる場合は、容易いものだ。