如何将图像大小调整为标题答案

【问题标题】：How to resize image into a header如何将图像大小调整为标题
【发布时间】：2022-01-17 10:46:46
【问题描述】：

您好，我想将我的图像调整为标题，在附件图片中以鲑鱼背景显示。出于某种原因，它不适合但超出了它。我附上下面的代码。

body{
  background-color: bisque;
}
.header{
  background-color: salmon; 
}
.header img {
  float: left;
  width: 100px;
  height: 100px;
 
}

.header h1 {
  top: 18px;
  left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel = "stylesheet" href="logo.css">
</head>
<body>
  <div class="header">
    <img src="Small_scream.png">
    <h1>My website name</h1>
  </div>
</body>
</html>

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/9340179/fluid-images-in-one-row
确实是非常规的解决方案，但它确实有帮助！谢谢！

标签： css image header

【解决方案1】：

如果您想将图片放入header div 中，您可以相对于标题大小定位图片。并通过更改这两个属性值将图像的位置设置为left 或right。

CSS：

  body{
   background-color: bisque;
  }

.header{
  background-color: salmon; 
  position:relative;
}

 .header img {
  position: absolute;
  right:0%;
  width: 5%;
  height: 100%;
 }

  .header h1 {
   top: 18px;
   left: 10px;
  }

此外，您可以通过以下方式将图像放置在更中心的位置：

img{
  object-fit: cover;
  object-position: 50% 50%;
}

您可以根据需要更改对象位置。

【讨论】：

【解决方案2】：

为您的标题设置一个高度 - 目前它由您的字体大小定义 - 并将您的 img 高度设置为 100%。

【讨论】：

完美，谢谢！！