html - 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

将 .menuItem 更改为 display: inline-block 因为 inline 元素不遵守宽度和高度。并在图像上设置 max-width: 100% 以使其受其 parent 大小的限制

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

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

img{
   max-width: 100%;
}

FIDDLE

这里是对不同显示类型的解释:https://stackoverflow.com/a/9189873/3113558