Question

我有一个问题让我的页面调整大小并正确缩放。基本上，该网站将在浏览器和平板电脑上随时在手机上打开。下面是一段代码：

<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不会自动调整窗口大小。有没有办法更改代码以影响所有图像，或者我应该使用自动调整大小代码一次执行每个图像？

Answer 1

您必须手动为每个窗口大小（窗口，平板电脑，移动设备）添加大小。此当前图像行为是正常的。

为每个@media在css中添加特定的图像大小。

我的例子：

@media screen and (max-width: 1280px) { 
  .imgClassResize { 
     width : yoursize
   } 
}

@media screen and (max-width: 1024px) { 
  .imgClassResize { 
     width : yoursize
   } 
}

Answer 2

高度和宽度可以设置为自动（这是默认值。表示浏览器计算高度和宽度），或者以长度值指定，如px，cm等，或者以百分比（％）为单位包含块。

在您的情况下，百分比（％）将完成这项工作。您还可以使用媒体查询在不同设备上更好地构建页面。

Answer 3

为什么不试试jQuery

假设图像

<img id="img" src="images/image.jpg">

使用以下代码将宽度设置为100％

var w = innerWidth;
$('#img').css({"width":w});

如果您不想使用js，则需要设置宽度百分比

#img{
    width:100%;
}

自动调整图像大小以适应浏览器（css Html）

3 个答案:

自动调整图像大小以适应浏览器（css​​ Html）

3 个答案:

自动调整图像大小以适应浏览器（css Html）