imgのオーバーフローを防ぐには？

私の問題は、私がウェブサイトのロゴとして使用したい画像があることです。それが入っているヘッダとdivは適切なサイズになっています（私はそれをchromeで調べることでチェックします）が、imgはあふれています。どのように私はそれを縮小するのですか？（私は、コードのプレースホルダイメージを使用します）ここではコードです：ここではimgのオーバーフローを防ぐには？

<body> 
    <header class="mainheader"> 
    <a href="main.html" class="navelement"> 
     <div class="imgcontainer"> 
      <img src="https://lh3.googleusercontent.com/-Ajc8gSO3SRw/VtZj0tsyXhI/AAAAAAAAAHs/tlsdyufJ1J4/w868-h560/2.png"/> 
     </div> 
    </a> 
    </header> 
</body>

は、max-高さが動作しない理由を私は混乱している、付属のCSSです。

* { 
    box-sizing: border-box; 
} 
body{ 
    margin: 0; 
} 
header{ 
    height:10vh; 
    width: 100%; 
    float left: 
    margin: 0; 
    background-color:grey; 
    font-family: 'Teko', sans-serif; 
    display: inline-block; 
} 
header .navElement { 
    vertical-align: middle; 
    float:left; 
    width: 17%; 
} 
.imgcontainer{ 
    float:left; 
    max-height: 100%; 
} 
.imgcontainer img{ 
    float:left; 
    max-height:100%; 
}

私は私がどのような作品を知らないことをそれを修正するためにそんなに試したので、いくつかのものは不要ですが、その実現。役に立つ返信をありがとう。

出典

2016-08-04 Fzzz

"私はいくつかのことは不要だが、それは私がそれを修正するために何度も試みたので、私は何がうまくいけないのか分かりませんでした。あなたの仕事を定期的に保存したり、チュートリアルで作業して、誤ったバージョンからより信頼性の高いバージョンに簡単に戻ることができます。 – technico

バックグラウンドイメージを簡単に設定できます。以下を指定することができます。 'background-size：cover;' –

要素をクリアしてください！そこには3つまたは4つの 'float'要素があり、すべてが異なるネストされたレベルにありますが、単一の' clear'ではありません。 – Santi

コンテンツがオーバーフローするのを防ぐには、対応するcss-property：overflow: hiddenを使用します。そうした場合、オーバーフローしているコンテンツは単に切り取られます。あなたの例では、これは正しいアプローチではありません。

max-heightの代わりにheightを使用することができます。これにより、要素の絶対値を割り当てます。 .imagecontainerにはmax-heightプロパティしかありませんので、heightと交換してください（here）。

.imgcontainer { 
    float: left; 
    height: 100%; 
}

出典

2016-08-04 20:18:23 Aer0

これは最初に動作するように見えますが、imgに余白を追加すると再びオーバーフローします。 – Fzzz

代わりに 'padding'を使います。 – Aer0

imgのオーバーフローを防ぐには？

答えて

関連する問題