<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link rel="stylesheet" href="profilepage.css">
</head>
<body>
<!-- Start your code here -->
<div class="profile-box">
<div class="bg">
<img src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
</div>
<!-- End your code here -->
</body>
</html>
个人资料页面.css
.bg {
width: 100%;
height: 10%;
}
结果是这样的:在我的页面上
我想要的是覆盖整个第一行的宽度和页面的 10% 的高度。即
黑线结束 img 的地方
我一直在玩宽度和高度，但没有任何效果。当我改变宽度时，会出现一些大的东西。即使我让宽度变小。我不知道为什么宽度会改变高度。我究竟做错了什么？
最佳答案
百分比高度指的是直系父级的高度。如果未设置父高度，CSS 将不执行任何操作。您可以从 body 标签向下层叠 100% 的高度设置，也可以将一些固定值应用于图像标签的直接父级。
固定值(使用 View 高度直接指代 body 标签的高度)
<div style="height: 10vh;">
<img style="max-height: 100%;" src="https://www.capisol.co.za/wp-content/uploads/gaussian-blur-orange-367347-background-wallpapers.jpg" />
</div>
层叠高度
.bg {
width: 100%;
height: 10%;
}
body {
height: 100%;
}
.profile-box {
height: 100%;
}
html {
height: 100%;
}
img {
max-height: 100%;
width: 100%;
}
在这两种情况下，我们都必须通过父类限制图像高度，否则任何更改都不会生效。
我使用了这些来源: How to make a div 100% height of the browser window 和 Make an image to fit its parent dimensions
关于HTML/CSS 宽度/高度不会改变？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59022714/