jquery - DIV 位置固定，内部内容重叠

Question

我正在创建一个粘性 header ，父 DIV 设置为固定高度，我在 div 中放置了一个 Logo ，一个 DIV 用于菜单。 Logo 不适合父容器，它重叠。我怎样才能使它适合 Image Width:100%;这样它只能在父级高度中排在第一位。下面是我的

 <div class="header">
   <div class="logo">  
     <img src="http://img2.thejournal.ie/inline/2305998/original/?width=545&version=2305998">
   </div>
   <div class="menu">    
     Home . Services . About  
   </div>
 </div>

请看一下这个 fiddle : https://jsfiddle.net/fzLq3p2s/

Answer 1

您永远不会设置 <div class="logo"> 的宽度或高度

https://jsfiddle.net/FllnAngl/fzLq3p2s/2/

固定:

.logo {
  width:100px;
  height:50px;
  float:left;
  display:inline-block;
}

:)

如果您从未设置图像所在的 div 的宽度，则在 css 中使用

.logo img{
  width:100%;
  height:100%
}

将采用图片的最大宽度和最大高度，而不是最大可用高度。这应该是图像所在的 div 的最大高度。因此您需要设置 div 的宽度和高度