我在让我的页面正确调整大小和缩放时遇到了问题。基本上,该网站偶尔会在手机上的浏览器和平板电脑中打开。这是代码片段:
<style type="text/css">
div#container
{
position:relative;
width: 1439px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
body {text-align:center;margin:0}
</style>
</head>
<body>
<div id="container">
<div id="g_image1" style="position:absolute; overflow:hidden;
left:0px; top:8px; width:1318px; height:88px;
z-index:0"><img src="images/LogoHeader.jpg" alt="" title="" border=0
width=1318 height=88></div>
<div id="image2" style="position:absolute; overflow:hidden; left:81px;
top:100px; width:1317px; height:572px; z-index:1"><img
src="images/TitlePicAerialSurveys.jpg" alt="" title="" border=0
width=1317 height=572></div>
例如,image2 不会自动调整到窗口大小。有没有办法更改代码以影响所有图像,或者我应该使用自动调整大小代码一次处理每张图像?
最佳答案
高度和宽度可以设置为auto(这是默认的。意味着浏览器计算高度和宽度),或者以长度值指定,如px、cm等,或者以百分比(%)来指定包含 block 。
在您的情况下,百分比 (%) 将完成这项工作。您还可以使用媒体查询在不同设备上更好地构建页面。
关于html - 自动调整图像大小以适应浏览器 (css Html),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37650928/