Question

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

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

当我rezize的窗口是moving upwards时。

如何更正。

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

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

当试图调整窗口大小时，图像正在向上移动。

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>

Answer 1

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

df = (df.groupby(['p','f']).agg({'c':list, 'a':'sum'})
        .groupby('p').apply(np.cumsum))
df['c'] = df['c'].apply(lambda x: len(set(x)))
df = df.reset_index()
print (df)
   p  f   c        a
0  1  2   5   288.32
1  1  3   6   576.32
2  1  4   8   873.32
3  1  5  10  1569.52
4  2  1   2      210
5  2  2   3      460
6  2  3   4      750
7  2  4   4      910

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;
}

Answer 2

如果要覆盖图像的容器，可以使用background-size: cover;，

如果要确保显示整个图像（但需要调整大小），可以使用background-size: contain;

以上两个要求在类box1

中明确的宽度和高度

Answer 3

我建议您根据需要给身体background-position。通常居中是最佳选择：

background-position: center center;

您可以通过查看代码段了解其工作方式。通过右下角的手柄调整图像大小。

div{
	background-image: url('//unsplash.it/500');
	background-size:cover;
	background-position:center;
	resize:both;
	overflow:auto;
	width:100%;
	height:200px;
}

<div></div>

如何使背景图像正确放置在电路板内而又不会失去响应能力

3 个答案: