HTML/CSS 宽度/高度不会改变？答案

【问题标题】：HTML/CSS width/height wont change?HTML/CSS 宽度/高度不会改变？
【发布时间】：2019-11-24 21:42:53
【问题描述】：

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

profilepage.css

.bg {
  width: 100%;
  height: 10%;
}

这样出来：在我的页面上

我想要的是覆盖整个第一行的宽度和页面的 10% 的高度。即

黑线结束img的地方

我一直在玩宽度和高度，但没有任何效果。在我改变宽度的那一刻，一些大的东西出现了。即使我让宽度更小。我不知道为什么宽度会改变高度。我究竟做错了什么？

【问题讨论】：

将图片设为背景图片。

标签： html css

【解决方案1】：

百分比高度是指直接父级的高度。如果未设置父高度，CSS 将不执行任何操作。您可以从 body 标记向下级联 100% 的高度设置，也可以将一些固定值应用于图像标记的直接父级。

固定值（使用视图高度直接引用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

【讨论】：

【解决方案2】：

试试这个，你需要定义每个元素的高度和宽度，否则 css 不知道哪个元素有什么值。

body, html {
            margin: 0px;
            padding: 0px;
            width: 100%; 
            height: 100%;
        }
        .profile-box {
            width: 100%;
            height: 100%;
        }
        .bg {
          width: 100%;
          height: 10%;
        }
        .bg img {
            width: 100%;
            height: 100%;
        }

【讨论】：