如何使背景图像正确放置在电路板内而又不会失去响应能力 [英] How to make background image fit correctly inside a board without losing responsiveness

问题描述

我有在其中包含类框的代码，我已经将backgroundimage赋予了class box box1.

I have code in which there is class box, i have given backgroundimage to class box box1.

我的问题是image is not correctly fitting inside to the board.

当我rezize窗口是moving upwards时.

如何更正.

如何制作image fit correctly inside the board without losing responsiveness?

这是执行此操作的方法，当我尝试将其安装在面板中时，它不仅安装在盒子中，而且失去了响应能力..

which is the method to do this, when i try to make it fit inside the board it is not only fitting inside the box, but also losing its responsiveness..

当试图调整窗口大小时，图像将向上移动.

when itry to resize the window the window the image is moving upwards..

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>

推荐答案

我认为您正在以错误的方式处理此问题.相反，我将从主要背景中提取board元素，并将其单独用作元素:

I think you are tackling this the wrong way. I would instead extract the board element from the main background and use it as an element alone:

html {
  background: #afffdc;
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.stack.imgur.com/CM15R.jpg) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}

<div id="container">
  <div class="box">
  </div>
</div>

更新

这是透明版本

html {
  background: linear-gradient(to right,pink, lightblue);
}

#container {
  position: fixed;
  bottom: 0;
  left: 100px;
  background: url(https://i.stack.imgur.com/ctB0T.png) top/contain no-repeat;
  height: 50vh;
  width: 29vh;
  max-width: 20vw;
  max-height: 35vw;
}

.box {
  padding-top: 173%;
  background: url(https://picsum.photos/200/300) 50% 5%/86% 27% no-repeat;
}

<div id="container">
  <div class="box">
  </div>
</div>

这篇关于如何使背景图像正确放置在电路板内而又不会失去响应能力的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！