html - 如何使背景图像正确适合板内而不会失去响应能力
问题描述
我有代码,其中有类框,我已经给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>
解决方案
我认为您以错误的方式解决此问题。相反,我会从主背景中提取 board 元素并将其单独用作元素:
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>
推荐阅读
- python - 不同的 Excel 版本使用 xlsxwriter 给出不同的结果
- postgresql - 如何innerJoin in Typeorm NestJs,我是typeorm和nestjs的新手
- python - 安装后:pip install ffn, importing ffn failed
- java - 将 Spring 应用程序从 Hibernate 4.3.1.Final 迁移到 5.4.27.Final
- go - 如何让进程认为输出到终端?
- spring - 在 spring 5.2.3 版本中没有触发 Quartz 调度程序作业,有什么建议吗?
- c# - C# - SQL - 将 rowsCount 动态添加到数据模型
- batch-file - 我们是否有命令在 Windows 命令提示符中删除目录的所有文件和目录
- python - 每次在循环中调用 Python 函数参数时,如何更新它?
- r - 根据 R 中的 id 和 year 列创建增量列 year