javascript - 如何使图像适合板内

<分区>

我有代码，其中有类框，我已将 backgroundimage 给 class box box1。

My problem is that the image is not correctly fitting inside to the board. When i resize the window it is moving upwards. How to correct it?

如何在不损失响应性的情况下使图像正确地适合板内而不从主背景中提取板元素并将其单独用作元素？

这是执行此操作的方法，当我尝试使其适合板内时，它不仅适合盒子内，而且还失去了响应能力..

html, body {
 background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 width:100%;
 height:100%;
 overflow: hidden;
 background-size: 100vw 100vh;
}

#box1 {
  position: absolute;
  top: 55.3vh;
  left: -19.98vw;
  cursor: pointer;
  border:px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box1 p {
  width: 10.0vw;
 height: 1.0vh;
  border-radius: 25%;
}


#container {
  white-space: nowrap;
  border:px solid #CC0000;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30.5vw;
}

.box p {
  font-size: calc(2vw + 10px);
}


.hidden{
  visibility: hidden;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: blue;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
      
        <div class="box box1" id="box1"  style="background-image:url(https://picsum.photos/200/300);">
          <p name="values" id="name1" class="hidden"></p>
        </div>

      </div>
    </div>
  </div>

最佳答案

将 position: relative; 添加到 #container 和 .container2 (父级)，如果你设置了 position:absolute给 child

See fiddle

html, body {
 background-image:url(https://i.ibb.co/K7mpxZG/background9.jpg);
 background-repeat: no-repeat;
 background-size: cover;
 width:100%;
 height:100%;
 overflow: hidden;
 background-size: 100vw 100vh;
}

#box1 {
  position: absolute;
  top: 55.3vh;
  left: -19.98vw;
  cursor: pointer;
  border:px solid #0066CC;
  background-repeat: no-repeat;
  background-size: cover;
}

#box1 p {
  width: 10.0vw;
 height: 1.0vh;
  border-radius: 25%;
}


#container {
  white-space: nowrap;
  border:px solid #CC0000;
position: relative;
}

.containerr {
  border: px solid #FF3399;
}

.container2 {
  width: 50.1vw;
  position: fixed;
  top: 10.5vh;
  left: 30vw;
  position: relative;
}

.box p {
  font-size: calc(2vw + 10px);
}


.hidden{
  visibility: hidden;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 5vw;
  color: blue;
  text-align: center;
}

<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">
      
        <div class="box box1" id="box1"  style="background-image:url(https://picsum.photos/200/300);">
          <p name="values" id="name1" class="hidden"></p>
        </div>

      </div>
    </div>
  </div>

关于javascript - 如何使图像适合板内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54327450/

上一篇：javascript - 我如何获得一个 HTML 下拉列表以开始较低

下一篇：javascript - document.querySelectorAll ":not"内的条件不起作用

javascript - 单击第二个按钮后，jQuery on click 开始正常工作

javascript - 如何使用 Javascript 从外部 url 播放音频文件？

html - 对齐在 IE10 中损坏

html - 使用 nav-pills 渲染 django 和 html

html - 列表项中多个按钮的底部定位

javascript - jQuery 切换淡入淡出 : Can't get div to fade out/in on toggle

javascript - 从 API 查询 Google Spreadsheet/G Apps 脚本并获取过滤结果

javascript - 按下折叠或展开图片时如何连接我的滑动切换按钮

HTML, CSS |选择先前删除的箭头显示