html - 如何给窗口的图像百分比高度

标签 html css

我的页眉中有一个标识,我希望它是窗口高度的 10%。

<header style="float: left; height: auto; width: 100%;">
<img src="..." style="float: left; height: 10%;" />
</header>

这会导致我的图像根本不会改变大小,我该如何解决这个问题?

最佳答案

也许您可以将页眉设置为距 _parent 元素 10% 的高度(它甚至可以是父元素是 <body> 元素)。

然后使 img 适合 100% 的高度。

所以对于类似的东西

<body>
<header>
<img src="" />
</header>
</body>

你可能有:

body {
height: 100%;
}

header {
height: 10%;
}

img {
height: 100%;
}

当然只是一个想法。如果你考虑一下,你可以找到一个基于此的聪明解决方案,但比这个简单的方法聪明 ;)

关于html - 如何给窗口的图像百分比高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19015729/

相关文章:

html - 当父级是链接时,基于父级的中心图像

html - 给定一个固定位置的元素,如何在元素滚出页面时显示滚动条

html - 在父项悬停时设置多个子项的样式

HTML - 调整浏览器大小时裁剪背景图像宽度

javascript - 使用 CSS 或 JS 识别设备类型

html - `float:left` 和 css 样式表中的 rtl 方向

javascript - 如何隐藏其余未使用的图像

javascript - 如何使用 javascript 选择器获取表 td 中输入字段的值?

html - 位置 :absolute 之后的静态元素

css - 全宽 div 通过小描述文本 css 响应