Question

我在div上的背景出现问题时，我试图在更改屏幕分辨率时在div上获得响应的图像缩放。我目前有缩小图像以适合div的功能，但这使图像分辨率降低了。我似乎不太正确，所以想问的最好地方是在这里吗？

以下是我尝试尝试执行此操作的示例。但是我刚刚获取了一个占位符图像进行演示，并将.header的高度设置为640px，因为这是我在寻求帮助的地方。如果您运行该代码段并调整窗口大小，则可以看到我正在谈论的问题。

.header {
  width: 100%;
  height: 640px;
  background-image: url("http://via.placeholder.com/640x360");
  background-size: 100% 100%;
}

.navBar {
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
  margin-right: 50px;
}

li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
}

.active {
  text-decoration: underline;
}

<div class="header">
  <div class="navBar">
    <ul>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 2</a></li>
      <li class="active"><a href="">Link 1</a></li>
    </ul>
  </div>
</div>

Answer 1

通过更改背景大小以覆盖或包含（请参见差异here），图像将适应div的大小！：）

我已经编辑了答案，我认为现在可以满足您的需求，图像URL在下面，因此您可以将结果与图像进行比较。

https://images.unsplash.com/photo-1508138142660-302e69e74271?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80

.header {
  width: 100%;
  height: 70px;
  background-image: url("https://images.unsplash.com/photo-1508138142660-302e69e74271?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  background-size: cover;
}

.navBar {
  width: 100%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: right;
  margin-right: 50px;
}

li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  color: #ffffff;
}

.active {
  text-decoration: underline;
}

<div class="header">
  <div class="navBar">
    <ul>
      <li><a href="">Link 3</a></li>
      <li><a href="">Link 2</a></li>
      <li class="active"><a href="">Link 1</a></li>
    </ul>
  </div>
</div>

屏幕尺寸更改时缩放背景图像/ div尺寸吗？

1 个答案: