div中的图像不会根据div百分比调整大小

Question

我试图创建三个菜单项，它们均匀分布在图像下方的一些文本中。现在我只是试图让图像接受基于类名称menuItem的百分比高度或宽度，但它似乎根本不起作用。为什么是这样？

HTML：

<div id='menu'> 
      <div class='menuItem'> 
       <img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png' > 
      </div> 
      <div class='menuItem'> 
       <img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'> 
      </div> 
      <div class='menuItem'> 
       <img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'> 
      </div> 
</div> 

CSS：

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

.menuItem { 
    display:inline; 
    width:25%; 
} 

Answer 1

你只给了图像的最大宽度，而不是一个宽度。试试这个（Here's a fiddle）

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

.menuItem { 
    display:inline; 
    width:25%; 
} 

#menu .menuItem img{ 
width:100%; 
} 

Answer 2

你必须把类的IMG标签本身，而不是周围的DIV，除非你使用的引导，它看起来并不像你。 Bootstrap会提供比你在这里工作更多的依赖关系。

Answer 3

将.menuItem更改为display: inline-block而不是因为inline元素不尊重宽度和高度。并且在图像上设置max-width: 100%，使它们只限于由他们的父母大小

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

.menuItem { 
    display:inline-block; 
    width:25%; 
} 

img{ 
    max-width: 100%; 
} 

FIDDLE

这里是关于不同类型display解释：https://stackoverflow.com/a/9189873/3113558