web-dev-qa-db-ja.com

Bootstrapを使用してロゴ画像をレスポンシブにする

サイトのヘッダーにbootstrap。ロゴ？それを得るための最良の方法は何ですか？ありがとう。それは私のコードです：

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid"></div>
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="~/Content/images/logo.png" /></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="~/About/Index">About</a></li>
            <li><a href="~/Contact/Index">Contacts</a></li>
        </ul>
    </div>

</nav>
htmlcsstwitter-bootstrapresponsive-designnavbar
14
D.B

この質問に対する単一の答えがあるとは思いませんが、あなたの選択肢に光を当てようと思います。

ブートストラップを使用すると、.img-responsiveクラスを画像に合わせて、ページ幅に合わせてサイズを変更します。 Bootstrapのドキュメント によると：

Bootstrap 3の画像は、.img-responsiveクラス。これはmax-width: 100%;、height: auto;およびdisplay: block;は、画像を親要素に合わせて適切に拡大縮小します。

次に、さらに一歩進んで、2つの異なる画像を作成します。これは、画面の解像度であるため、デスクトップとモバイルではそれほどではありません。 Retinaスクリーンは、たとえば、より高い解像度で画像を表示します。多くの人が2つの異なる画像を提供しています。1つは通常の解像度で、もう1つは網膜スクリーン用です。

このチュートリアル は、Retinaスクリーン用に画像を準備するためのいくつかの方法をハイライトします。1つのソース画像を提供し、サイズを小さくするか、CSSメディアクエリを使用して画像のsrcを変更します。また、CSS Media Queriesを使用して画像のsrcを変更しても、ユーザーが同じ画像の2つのバージョンをダウンロードする必要があるというわけではありません。

15
Tim McClure

Bootstrapのレスポンシブイメージクラスは、max-widthを100％に設定します。これによりサイズが制限されますが、画像自体よりも大きい親要素を埋めるために強制的に拡大されません。アップスケーリングを強制するにはwidth属性を使用する必要があります。

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

isherwoodに感謝[〜＃〜] demo [〜＃〜]

<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" class="img-responsive" alt="Responsive image">
4
sheshadri

クラスを追加する

img-responsive

あなたのイメージに

2つの画像を追加することをお勧めします。しかし、多くのブラウザは、小さな画像がレスポンシブなものであることを認識していません（これがすぐに変わることを願っています）。そのため、2つの画像をロードする必要があります。どちらをロードするのが重い（そして遅い）か。

今のところ、画像にクラスを追加することをお勧めします。

2
Danny van Holten

高さ：100％および幅：自動を使用して、現在画像がある場合は、ナビゲーションバーのサイズに維持する必要があります。 navbarの高さは、どのデバイスでもデフォルトで50ピクセルです。

2
spasticninja

このクラスをオーバーライドします

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}
2
Udara

bootstrap=には、イメージをレスポンシブにするクラスがあります。

クラスはimg-responsive

これをimgタグに追加すると、画像が反応します。

1
Saiyam Gambhir

私は別の解決策を好みます。 logo-navbarという別のクラスを作成します。

<a class="navbar-brand js-scroll-trigger" href="#page-top">
    <img class="logo-navbar" src="img/logo-1-img-black.png">
</a>

そして、メニューのfont-sizeでリレーショナル幅を適用しました：

img.logo-navbar {
    width: 2rem !important;
    height: 2rem !important;
}

これにより、ロゴは常にnavbarコンテンツに合わせて調整されます。

0
cbcram