html - 自动调整图像大小以适应浏览器 (css Html)

标签 html css

我在让我的页面正确调整大小和缩放时遇到了问题。基本上,该网站偶尔会在手机上的浏览器和平板电脑中打开。这是代码片段:

<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/

相关文章:

php - 在 HTML 下拉 <select> 列表中显示数据库表值

css - 带有@at-root的另一个选择器的SASS父选择器

Javascript 不影响 HTML 元素

css - Bootstrap 3 导航栏折叠宽度

javascript - 使用 javascript 隐藏 HTML <img ...>

javascript - 如何检查变量是否包含中文/日文字符?

javascript - 在 Adob​​e Animate CC 中发布后的空白 HTML5 Canvas

css - CSS 中嵌入的 SVG 未正确显示

html - 将 css 链接添加到我无法使用 XSLT 修改的 xhtml 文件?

html - 如何使用@face-font inline 作为行内样式规范?