javascript - 如何使图像适合板内
问题描述
我有代码,其中有类框,我已经给backgroundimage
了class box box1
.
我的问题是图像没有正确地适合电路板内部。当我调整窗口大小时,它正在向上移动。如何纠正它?
如何在不从主背景中提取板元素并将其单独用作元素的情况下使图像正确地适合板内而不失去响应能力?
这是执行此操作的方法,当我尝试将其安装在板内时,它不仅安装在盒子内,而且还失去了响应能力。
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
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>
推荐阅读
- python - 我有 25 年的月平均数据,我想取多年来每个月的平均值,我的 for 循环是否正确?
- flutter - Flutter:NoSuchMethodError:方法'connect'在null上被调用
- javascript - ID 有时不会随 onclick 事件返回?
- php - 为什么 opcache 没有被刷新?
- c# - WPF C# Cefsharp 版本。71,我有一个 URL 和一个 cookie,它将绕过登录并显示最终结果,直到显示加载
- django - 在 settings.py 中使用 Django 从商业前景电子邮件发送电子邮件的配置是什么(例如 .. - office@test.com )
- html - 如何在asp.net mvc中的img src中传递变量
- sql - 如何从星期一到星期五对这个查询进行排序?
- java - 具有 recyclerview 和 tablayout 的动态高度查看器
- python - 如何在 Transformers 库中截断 Bert 标记器