Question

所以我正在尝试为我的profile_pic div创建一些填充。

这是html：

  <body>
  <div id="content" class="content">
    <div id="profile_pic" class="profile_pic">
    </div>
    <div id="overview" class="overview">
        asdasdasdasdasd
    </div>
    <div id="buttons" class="buttons">
    <!-- Sport, Academic, Other -->
    </div>
  </div>
  </body>

这是CSS

.profile_pic {
    height: 30%;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
    background-image: url("./images/profile_pic.jpg");
    border-radius: 8px;
    background-repeat:no-repeat;
    background-size:cover;
}

这就是页面的外观like

当我添加行时

padding-top: 10%;
padding-bottom: 10%;

this是图像上发生的

有人可以解释为什么会发生这种情况

Answer 1

使用box-sizing: border-box;，它在元素的总宽度和高度中包括填充和边框。 ;）

这将是最终代码。

.profile_pic {
  box-sizing: border-box;
  height: 30%;
  width: 15%;
  margin-left: auto;
  margin-right: auto;
  background-image: url("./images/profile_pic.jpg");
  border-radius: 8px;
  background-repeat:no-repeat;
  background-size:cover;
}

<div id="content" class="content">
  <div id="profile_pic" class="profile_pic">
  </div>
  <div id="overview" class="overview">
      asdasdasdasdasd
  </div>
  <div id="buttons" class="buttons">
  <!-- Sport, Academic, Other -->
  </div>
</div>

Answer 2

将此属性设置为图像：box-sizing: border-box

这样，将计算图像的总大小（包括填充），而不是额外添加填充大小。

填充更改图像的大小

2 个答案: