イメージはサイズ変更されていませんCSS/HTML

Question

ウェブサイトのヘッダーにロゴイメージのサイズを変更しようとしています。ヘッダーは、logoとnavbarという2つの要素で構成されています。左にロゴ、右にナビバーがあります。これまでのところ、私のコードは次のとおりです。

HTML：

<header> 
    <div id = "logo"> 
     <img src = "./media/logo/logo.jpg"> 
    </div> 

    <nav> 
     <ul id = "navbar"> 
      <li><a href = "#">1</a></li> 
      <li><a href = "#">2</a></li> 
      <li><a href = "#">3</a></li> 
     </ul> 
    </nav> 
</header> 

CSS：

header { 
    width: 100%; 
    max-width: 1080px; 
    display: block; 
    margin: auto; 
} 

header #logo { 
    float: left; 
    margin-left: 30px; 
} 

header #logo img { 
    width: 200px; 
} 

header nav { 
    width: 850px; 
    float: right: 
    margin-top: 30px; 
} 

header nav ul { 
    float: right; 
} 

header nav ul li { 
    display: inline; 
} 

イメージファイルがCSSコードで記述されたとして、それは、200pxのにダウンスケールする必要があり意味、268pxの幅を有し、 。しかし、代わりに画像は約300pxまで高画質です。まだそれはまだかなり200pxのにダウンスケーリングよりも〜300ピクセルにアップスケール

<img src = "./media/logo/logo.jpg" style = "width: 200px"> 

と

<img src = "./media/logo/logo.jpg" width = "200"> 

：私はまたにHTMLのimgタグを変更しようとしました。不思議なことに、それは適切に高級化することができます。ダウンスケーリングが問題です。

Answer 1

header { 
 
    width: 100%; 
 
    max-width: 1080px; 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
header #logo { 
 
    float: left; 
 
    margin-left: 30px; 
 
} 
 

 
header #logo img { 
 
    width: 150px; 
 
} 
 

 
header nav { 
 
    width: 850px; 
 
    float: right: 
 
    margin-top: 30px; 
 
} 
 

 
header nav ul { 
 
    float: right; 
 
}

<header> 
 
    <div id = "logo"> 
 
     <img src = "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"> 
 
    </div> 
 

 
    <nav> 
 
     <ul id = "navbar"> 
 
      <li><a href = "#">1</a></li> 
 
      <li><a href = "#">2</a></li> 
 
      <li><a href = "#">3</a></li> 
 
     </ul> 
 
    </nav> 
 
</header>

いや、あなたのコードは問題ではありません。私はあなたが別のCSSを紹介したと思います。これはあなたの実行可能なコードです、私はここで画像の幅を変更しました。見てみな。！！