html - CSS 定位图像以随窗口调整大小

Question

我是 HTML 和 CSS 的新手，但我想让图像跨越整个页眉而不剪切图像的一部分，或者是固定大小。目前，整个图像并没有显示出来，并且当窗口重新调整大小时，部分图像被裁剪掉了。我希望窗口可以调整，当它调整时，图像会随之调整以显示整个图像。

这是我的标题的 CSS。另外，我的页面布局是标题仅包含在称为“页面”的 div 中，其余内容作为“内容”嵌套在“页面”中。

 #header {
    background-image: url("../images/header.jpg");
    background-position: right;
    background-size: 100%;  
    width: 100%;
    height: 20%;
    left: 50%;
    position: fixed;
    top: 0%;
    transform: translateX(-50%);
}

Answer 1

使您的图像成为 HTML 元素 <img> - 而不是背景 - 使用更少的代码更容易获得您想要的效果。

body {
  margin: 0;
  }
#header {
    width: 100%;
    height: auto;
    position: fixed;
}
img {
  width: 100%;
}

<div id="header">
  <img src="http://placehold.it/1000x150">
</div>