使图像全宽答案

【问题标题】：Make image full width使图像全宽
【发布时间】：2021-02-16 19:16:54
【问题描述】：

我正在尝试将图像放入我的页眉元素中。当我运行 Live Server 时，图像不会填满容器的整个宽度。

编辑 图片尺寸为 899.875X600

这是我的 CSS 和 HTML 代码：

* {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
    color: white;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    top: 0;
    left: 0;
    position: absolute;
}

header {
    min-height: 100%;
    min-width: 1024px;
    width: auto;
    height: 600px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

<body>
    <header>
        <img id='backgroundImg' src="image.jpg" alt="">
    </header>
</body>

【问题讨论】：

你身上为什么有position: absolute;？
@j08691，我想让body适合整个屏幕
heigth-width 的比率怎么样，它们是一样的吗？
@MisterJojo，我刚刚编辑了尺寸，899.875 x 600px

标签： html css image containers

【解决方案1】：

我强烈建议您不要在身体上设置绝对位置。为此使用100vh 单位。这还取决于您希望如何在标题中进行图像处理，您的问题并不清楚。这是你想要的吗？

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

header {
  width: 100%;
  height: 600px;
  background-color: aqua;
  padding: 1rem;
}

img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<body>
  <header>
    <img id='backgroundImg' src="https://source.unsplash.com/random" alt="image">
  </header>
</body>

【讨论】：

【解决方案2】：

* {
    margin: 0;
    padding: 0;
}
body {
   
    color: white;    
    height: calc(100vh - 4px);  
    border:solid 2px red;
    z-index:5;
}

header {    
  
  height:30vh;
  background: url('https://via.placeholder.com/100');
  background-repeat: no-repeat;
  background-size: cover;
}

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

【讨论】：