web-dev-qa-db-ja.com

ブートストラップ：Navbarロゴサイズ

1700x700のロゴがあり、ナビゲーションバーの高さが70です。自動サイズ変更して、ナビゲーションバーの高さに合わせます。フォトショップで170x70にサイズ変更できますが、問題はズームすると画像の品質が低下することです。

Imgレスポンシブで試しましたが、機能しません。

ありがとうございました！

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
}
twitter-bootstrapcsstwitter-bootstrap-3navbar
4
Asez

Max-height CSSまではABKに同意しますが、画像のサイズ変更に関するJGonDevはパフォーマンスの観点から正しい方向だと思います。あなたは本当にあなたのサイトのスタイルとデザインにCSSだけを使うべきです。コードをハッキングして必要な欲求を強制するために使用しないでください。

サイズ変更に関する限り、ほとんどの新しい開発者はPhotoshopのような優れたデザインツールにアクセスできませんが、できれば素晴らしいです！ Macユーザーの場合、プレビューは画像のサイズを変更する作業を行います。

プレビューで画像を開きます-Tools/AdjustSizeに移動します：

次に、幅または高さを目的のサイズに変更できます。 Scale Proportionallyチェックを維持することを確認してください！これにより、画像がゆがむことがなくなります。

サイズを変更したら、[OK]ボタンをクリックします。ファイルの保存。

**注-ファイルを別のファイル（navbar-logo.pngなど）として保存してください。これにより、コードで画像を何に使用するかを簡単に思い出せるようになります。

画像のサイズを変更すると、Webサイト全体のサイズとサイズが減少し、サイトの全体的なパフォーマンスが向上します。

1
Chuck Gray

あなたはこのCSSを使うことができます

background：url（../ images/logo.png）no-repeat scroll center center/contains;

0
Suraj Pradhan

ロゴを与えるmax-heightそして値をナビゲーションバーの高さにします...

.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    left: 15px;
    max-height: 70px; /* height of the navbar */
}
0
Abk

あなたが必要とするnavbar
そのflexを使用しますjustify-contentコンテンツを自動的に調整して、アイテムを適切な位置に調整します
align-items:center、まあそれは自明です

あなたの必要に合わせて調整してください。

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    transition: .3s all;
}


header {
    background: #D2DCE1;
    z-index: 100;
}

nav {
    width: 100%;
    display: flex;
    padding: 5px 15px;
    justify-content: space-between;
    max-width: 1366px;
    margin: auto;
    margin-bottom: 10px;
}

#logo {
    float: left;
    width: 250px;
    height: 40px;
    background: url('https://i.imgur.com/K5bq1MD.png') left/contain no-repeat;
}
#logo:hover {
    background: url('https://i.imgur.com/Kbbcixn.png') left/contain no-repeat;
}

nav ul {
    float: right;
    display: flex;
    justify-content: space-around;
}

nav ul li {
    float: left;
    display: flex;
    margin: 0 20px 0;
    align-items: center;
    justify-content: space-around;
}

nav ul li a {
    color: #000;
    opacity: .6;
    display: block;
    font-size: 90%;
    font-weight: bold;
    font-family: Arial;
    letter-spacing: 1px;
    border-top: 1.5px solid transparent;
    border-bottom: 1.5px solid transparent;
}

.active {
    border-bottom: 1.5px solid #ff7700;
    opacity: 1;
}

nav ul li a:hover {
    opacity: 1;
}
<header id="navbar">
  <nav>
    <a id=logo href="#"></a>
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>

    </ul>
  </nav>
</header>
0
Anuja Nimesh

**あなたの質問に対する最も簡単な答えは**です

<a class="navbar-brand" href="index.php"></a>



.navbar-brand
{
    position: relative;
    background: url(../images/logo.png);
    width: 170px;
    height: 15px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

便利だと思う場合は、UPVOTEを忘れないでください

0
Chaitanya Mogal