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

Question

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

这是我的标题的 CSS。另外，我的页面布局是header只包含在div调用“page”中，其余内容作为“content”嵌套在“page”中。

 #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>

Answer 2

这是一种使用带有填充的 background-image 来“伪造”div 高度的方法。

 body {
   margin: 0;
 }
#header {
    width: 100%;
    height: 150px;
    position: fixed;
    background-image: url("http://placehold.it/1000x150");
    background-size: contain;
    background-repeat: no-repeat;
    height: 0;
    padding-top: 15%; /* (img-height / img-width * width) */ /* (150 / 1000 * 100) */
}

<div id="header">
</div>

编辑： 如果裁剪没问题，你可以试试this。