我已经查找了一百万种技术，但我无法让它发挥作用，我知道还有其他类似的帖子。 如果它给任何人带来麻烦，我很抱歉，但我需要针对我的代码的具体说明，因为我很愚蠢。提前非常感谢！我希望 div 容器 contentContactBox 以及其中的所有 div 在浏览器窗口大小调整时按比例调整大小。 contentcontactBox 的左侧是一些文本，右侧是嵌入的谷歌地图。 我希望它们都随着窗口的大小按比例缩小。
注意：我知道我可能需要从子div中取出position:absolute
HTML：
<div id="contact" class="tab-pane fade in">
<div id="contentBoxContact">
<div id="map"></div>
<div id="contact-content">
<h1>Come see us downtown<br> and have a beer!</h1><br>
<h2 style="text-decoration: underline">Phone Number:</h2>
<h2>555-555-5555</h2><br>
<h2 style="text-decoration: underline">Email:</h2>
<h2>[email protected]</h2><br>
<h2 style="text-decoration: underline">Address:</h2>
<h2>
Fake Place<br>
414 2nd Avenue<br>
Fake Location<br>
</h2>
</div>
</div>
</div>
</div>
CSS：
body {
padding-top: 80px;
width: 100%;
height: 100%;
color: white;
background: url(/images/TaphouseTaps2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.tab-content{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#contentBoxContact {
margin-top: 54px;
width: 1185px;
height: 560px;
margin-left: -593px;
background: rgba(34,34,34,.75);
}
#contact-content {
position: absolute
margin-top: 8px;
margin-left: 40px;
line-height: 2px;
font-family: Titillium Web, Arial, Verdana, sans-serif;
color: white;
}
#map {
position: absolute;
width: 600px;
height: 500px;
margin-top: 30px;
margin-left: 550px;
}
您可以使用 vw 值来使 div 随窗口按比例缩小。
HTML
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
CSS
.one {
width: 20vw;
height: 20vw;
background-color: #76ccde;
float: left;
margin-left: 10px;
}
.two {
width: 25vw;
height: 25vw;
background-color: #c976de;
float: left;
margin-left: 10px;
}
.three {
width: 30vw;
height: 30vw;
background-color: #a7de76;
float: left;
margin-left: 10px;
}
您可以使用以下代码来获取您需要的内容：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1,user-scalable=no">
</HEAD>
<BODY>
<STYLE>
HTML,BODY {width:100%;margin:0;padding:0}
BODY {overflow:hidden;text-align:center}
#wrapper {
position:relative;
width: 1280px;
height: 720px;
background-color:#6cffa0;
margin:0 auto;
}
</STYLE>
<script type="text/javascript">
window.onresize=function() {adapt()}
window.onload=function() {adapt()}
function adapt() {
let el=document.getElementById('wrapper')
let maxw=window.innerWidth
let maxh=maxw*0.5625
if (maxh>window.innerHeight) {
maxh=window.innerHeight
maxw=maxh*1.7778
}
let scale=window.innerWidth/1280
if (window.innerHeight/720<scale) scale=window.innerHeight/720
el.style.transform="scale("+scale+")"
if (window.innerWidth<=1280)
el.style.left=((window.innerWidth-1280)/2).toFixed(2)+'px'
else
el.style.left='0px'
el.style.top=((el.getBoundingClientRect().height-720)/2).toFixed(2)+'px'
}
</script>
<div id="wrapper">
<!-- put your HTML here -->
<img src="https://fastly.picsum.photos/id/29/4000/2670.jpg?hmac=rCbRAl24FzrSzwlR5tL-Aqzyu5tX_PA95VJtnUXegGU" float=right style="width:300px">
This is a test
</div>
</BODY>
</HTML>
只需将您的页面放入“包装器”div 中，所有内容都会相应调整大小。包装 div 保持其比例，并且其内容优雅地缩放。
此脚本设置为处理 16:9 的 div，但您可以通过替换 1280 和 720 值以及 0.5625 (9/16) 和 1.7778 (16/9) 轻松更改它) 在 CSS 中。
演示 JSFiddle：https://jsfiddle.net/uaq38y6f/3/
我认为你需要在子 div 中使用 px 而不是 % 供家长使用
height: auto;
width:auto;我建议你看看 Bootstrap。它以动态而闻名；如果屏幕尺寸发生变化，该页面的整个 CSS 也会发生变化。这是一个链接：Bootstrap 3。希望有帮助:)