私は1700x700のロゴを持っていて、私のnavbarの高さは70です。私は自動サイズ変更して、navbarの高さに適応したいと思います。私はPhotoshopで170x70にリサイズすることができましたが、ズームすると画像が品質を失うという問題があります。ブートストラップ：Navbar Logoサイズ
私はimg-responsiveで試しましたが、うまくいきません。
ありがとうございました！あなたが任意の外部CSSを与える必要はありません、以下のいずれかのDID
<a class="navbar-brand" href="index.php"></a>
.navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
}
あなたはこの
.navbar-brand {
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
background-size: contain;
}
ために次のCSSを設定することができます。
画像でclass = "img-responsive"を使用してください。
<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>
あなたの文法を見直してください。 「あなたは、あなたは外部のCSSを出す必要はありませんか？」とはどういう意味ですか？ – Abk
ロゴmax-heightを与え、あなたは
背景このCSSを使用することができますので...
.navbar-brand
{
position: relative;
background: url(../images/logo.png);
width: 170px;
left: 15px;
max-height: 70px; /* height of the navbar */
}
のような値がナビゲーションバーの高さにします。 url（../ images/logo.png）no-repeatスクロールセンターcenter/contain;
最適なオプションは、Photoshop（またはそれに類似したもの）のロゴのサイズを変更することです。
もちろん、ピクセル数を減らして表示すると解像度が低下しますが、大きなロゴをロードしてからCSSでサイズを変更すると、エフェクトは同じになり、ページの読み込みに時間がかかります。
最大高さCSSまではABKと同意しますが、画像のサイズ変更に関するJGonDevはパフォーマンスの観点から正しい方向です。サイトのスタイルとデザインにはCSSだけを使用するべきです。必要な欲求を強制するためにコードをハックするために使用すべきではありません。
サイズ変更に関する限り、ほとんどの新規開発者はPhotoshopのような優れたデザインツールにアクセスすることはできませんが、可能であれば可能です。 Macユーザーの場合、プレビューではイメージのサイズを変更するための作業が完了します。
は、プレビューでイメージを開いて - ツール/ AdjustSizeに行く：
次に、あなたが希望のサイズにあなたの幅や高さを変更することができます。比例的にチェックをつけてください！これはあなたのイメージが歪んでいないことを保証します。
サイズを変更したら、[OK]ボタンをクリックします。ファイルを保存します。
**注 - ファイルを別のファイル（navbar-logo.pngなど）で保存することを忘れないでください。そうすれば、コードで画像をどのように使用するかを簡単に覚えておくことができます。
イメージのサイズを変更すると、ウェブサイト全体の膨らみやサイズが小さくなり、サイト全体のパフォーマンスが向上します。
ありがとうございます！今は動作しますが、私のロゴはnavbarの一番上にあります。あなたはそれを（高さのように）どのようにセンタリングするかについてのアイデアはありますか？ – Asez
アライメントのために、background：url（../ images/logo）を使用することができます。png）センターセンター; –