2016-12-02 9 views
0

私はこのようなコードを持っている:リサイズ画像は

HTML:

<nav> 
    <table id="menuBar"> 
     <tr> 
      <td> <img src="data/Sources/menu.png"> </td> 
      <td> <img src="data/Sources/home.png"> </td> 
      <td> Files </td> 
      <td> Comments </td> 
     </tr> 
    </table> 
</nav> 

CSS:

nav { 
    text-align: center; 
    height: 100px; 
    width: 100%; 
    padding-left: 25%; 
    padding-right: 25%; 
    background-color: #7F7F7F; 
} 

#menuBar{ 
    padding: 5%; 
} 

#menuBar img{ 
    width: 100%; 
    height: auto; 
    display: block; 
} 

そして私はに写真に収まるようにしたいです細胞。

しかし、ピクチャはセルよりも大きく、イメージ自体のサイズを変更する代わりにテーブルのサイズを変更しています。それを理解できません。あなたの答えをありがとう。

+0

あなたは、バックグラウンド・サイズに見たことが:カバー? – Stephane

+0

'overflow:hidden'またはオーバーフローの他の適切なプロパティ値を試してください。この部分をテーブルセルに追加します。​​ – Greenhorn

+0

もし '#menuBar td { background-size:cover; オーバーフロー:スクロール; } 'still doesnt work – SRomie

答えて

0

幅の代わりにmax-width: 100%;を使用してください。

また(正確な画像視聴体験のための)画像のアスペクト比も

とテーブル

#menuBar{ 
    padding: 5%; 
    height:90%; 
    width:90%; 
} 

nav { 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    background-color: #7F7F7F; 
 
} 
 

 
#menuBar{ 
 
    padding: 5%; 
 
    height:90%; 
 
    width:90%; 
 
} 
 

 
#menuBar img{ 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
}
<nav> 
 
    <table id="menuBar"> 
 
      <tr> 
 
       <td> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </td> 
 
       <td> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </td> 
 
       <td> Files </td> 
 
       <td> Comments </td> 
 
      </tr> 
 
     </table> 
 
</nav>
に全幅を加えるを変更MAGEを防止するために、 max-height: 100%;を追加

しかし、これらの状況ではdivを使用することをお勧めしますアイブのデザイン

nav { 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    background-color: #7F7F7F; 
 
} 
 

 
#menuBar{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
#menuBar div{ 
 
    float:left; 
 
    height: 100%; 
 
    margin:0 auto; 
 
} 
 

 
#menuBar img{ 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
}
<nav> 
 
    <div id="menuBar"> 
 
      <div> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </div> 
 
       <div> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </div> 
 
       <div> Files </div> 
 
       <div> Comments </div> 
 
     </div> 
 
</nav>

+0

イメージはまだナビよりもテーブルを大きくします。画像のサイズは512x512です。 – SRomie

+1

私は質問にベストを追いかけているのかどうか分かりませんが、画像の最大幅と最大高さを100ピクセルのようにピクセルで指定すると、必要な処理が実行されます。 – Vcasso

+0

@SRomie yaah ..答えを更新しました – jafarbtech

関連する問題