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%，以便他们受父母大小的限制

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

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

img{
   max-width: 100%;
}

FIDDLE

以下是对不同display类型的说明：https://stackoverflow.com/a/9189873/3113558

Answer 2

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

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

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

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

Answer 3

你必须把课程放在 img 标签本身，而不是周围的div，除非你使用的引导程序看起来并不像你。 Bootstrap会提供比你在这里工作更多的依赖项。

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

3 个答案: