时间戳

首页 > 解决方案 > 使图像全宽

html - 使图像全宽

问题描述

我正在尝试将图像放入我的标题元素中。当我运行 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>

标签： htmlcssimagecontainers

解决方案

我强烈建议你不要在你的身体上有绝对位置。为此使用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>

推荐阅读