Question

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

这是我标题的CSS。另外，我的页面布局是标题只包含在div调用＆＃34; page＆＃34;其余的内容嵌套在＆＃34; page＆＃34; as＆＃34; content＆＃34;。

 #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> - 而不是背景 - 使用更少的代码更容易获得您想要的效果。

＆＃13;

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

＆＃13;

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

＆＃13;

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。

CSS定位图像用窗口重新调整大小

2 个答案: