我尝试使用 css 增加 header 部分中的徽标大小，但它分裂了

Question

每当我尝试在 header 中增加其大小时，我的徽标就会被拆分。这是标志。

header {
  background-image: url(https://i.stack.imgur.com/ycpfl.png);
  background-size: 50px;
  /*if i increse the size my logo is croped*/
  background-repeat: no-repeat;
  height: 50px;
  width: 150px;
  float: left;
}

<body>
  <header></header>
</body>

Answer 1

是的，因为您将高度设置为 header 50px。如果 background-size 也是 50px 就好了。但如果您增加 background-size 的大小，它会裁剪。您还必须增加 div 的高度。这样就好了。

也可以给background-size包含。所以图像将以全尺寸加载，也不会拆分。

header {
  background-image: url(https://i.stack.imgur.com/ycpfl.png);
  background-size: contain;
  /*if i increse the size my logo is croped*/
  background-repeat: no-repeat;
  height: 50px;
  width: 250px;
  background-position:center;
  float: left;
}

<body>
  <header></header>
</body>

我尝试使用 css 增加 header 部分中的徽标大小，但它分裂了

i try to increase my logo size in header section with the css but it split

html

css

background

background-image