Question

未考虑高度

我希望图像的高度和宽度相对于父图像的高度和宽度为80％，垂直和水平对齐。出于某种原因，它不起作用。

HTML：

<div id="menu_header_new_orig">
    <img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>

CSS：

    #menu_header_new_orig {
        margin-top: 2.5%;
        height:40%;
        width:100%;
        overflow: hidden;
        position: relative;
        border: 1px solid green;
        text-align: center;
    }
    #menu_logo_orig {
        width: 80%;
        height: 80%;
        position: relative;
    }

我已经找到了here，但以防有人有更好的解决方案。

Answer 1

如果我理解你的错误：

父#menu_header_new_orig父母也必须有一个身高（显然是100％）

html, body {
    height: 100%;
}

将显示设置为内联，10％设置为顶部以获得垂直对齐

#menu_logo_orig {
    top: 10%;
    display: inline;
    position: relative;
    width: 80%;
    height: 80%;
}

那是你要去的吗？ [不确定] - 尝试将#menu_header_new_orig高度设置为除40%之外的其他内容，以便从另一个角度来看它。

分叉小提琴 - ＆gt;的 http://jsfiddle.net/Dmc7j/

流体图像80％的宽度和高度相对于其父级垂直和水平对齐

1 个答案: