怎么让一张图片在网页上自适应宽高

作者&投稿:溥匡 (若有异议请与网页底部的电邮联系)
如何让背景图片自适应网页的大小?~

如果通过css设置背景图,那么图片尺寸要足够大,目前大宽屏1920左右,所以宽度最好设置为1920,然后居中;
如果通过div嵌入图片,那么将此div设置成绝对定位,z-index:-1;

“自适应网页设计”到底是怎么做到的?其实并不难。

1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0
,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码
不能指定像素宽度:width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
三、流动布局(fluid grid)
“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
四、选择加载CSS
“自适应网页设计”的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
五、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
六、图片的自适应(fluid image)
除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});

一般定义一个全站大小,然后再安全一个大框div width:100%,图片定义一个max-width:1903px,width:100%就可以做到了,但是图片大小本身还是个问题,如果如果超出居中的话可以用上margin:0 auto ; background:url() center top大概也能做到。


怎样将图片浮在网页上?
1. 将文字浮在图片上我们加个div把图片和文字包在一起,并且加上img-group和img-tip这两个class,便于后面的处理。我们要让文字浮在图片上面,需要加上定位。看文字浮在了图片的底部。display: inline-block;与定位无关,只是使整个.img-group长宽与图片适应。2. 文字与背景处理文字左对齐,我们把文...

怎么让一张图片在网页中居中显示
1、新建一个test.html文件。2、在文件中,创建一个div模块,在div内,使用img标签创建一张图片。3、在css标签内,设置div的高度、宽度、位置属性为绝对定位,同时使用left和top设置居中显示,从而实现图片在网页中居中显示。

怎么让一张图片在网页中居中显示
可以用“margin:0auto;”和“text-align:center;”是图片在网页中居中。1、新建html文档,在body标签中添加div标签,然后在div标签中添加img标签:2、为div标签添加“margin”属性,属性值是“0auto”,这时div标签将会在网页中居中显示:3、为div标签添加“text-align”属性,属性值是“center”,这时d...

如何让图片出现在网页中?
相对路径:如果是网站的话,则为下面的:img src=images\/tupian.jpeg\/>相对路径:如果是网站,则如下:将这个html文件与images放在同一个目录中:将此图片与html文件放在同一个目录中:标签中,输入html代码:img src="small3.png"\/>。3、浏览器运行index.html页面,此时添加的本地图片的路径是相对路径。

怎样在网页中嵌入图片?
1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。5、然后设定经过事件,切换成另一...

将一张小图片以3*3平铺在网页上js?
要将一张小图片以 3*3 平铺在网页上,可以使用 JavaScript 和 CSS 来实现。具体步骤如下:获取图片对象:使用 JavaScript 获取图片对象,例如使用 HTML5 存储功能将图片上传到服务器,或者从服务器下载图片并获取其对象。创建一个新的图片对象:使用 CSS 中的 background-image 属性将图片对象设置为背景...

html怎么把一个图片始终出现在页面上,就是不受页面滚动的影响,CSS属性...
代码中 top:150px 是指图片与网页顶部的距离。left:50%;是让图片剧中,不过是靠左剧中。margin-left:-500px; 是在刚才剧中的基础上在向左偏移500像素,这样做的效果就是在宽度960 的内容区10像素以外显示你的图片。你可以对 150px 和 -500pox 两个数字进行修改,来实现你要的效果!

html怎么在页面上显示图片
1、添加 标签,资源“src”里面填写本地图片的路径名:2、用浏览器打开文件,即可看到图片已添加成功,如下图所示 img标签定义及使用说明: 标签定义 HTML 页面中的图像。 标签有两个必需的属性:src 和 alt。注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。 标签的作用是...

怎样把照片发到百度网页上去
1、打开百度首页,然后点击“登陆”。2、弹出一个登陆窗口,在这里输入自己的“百度账号”和“密码”,然后点击“登陆”即可。3、登陆之后,需要点击自己的“百度账号”看如下图所示。4、打开之后出现如下图,在这里点击打开“空间”。5、出现如下图之后,点击选择“传照片”。6、根据提示,点击“添加...

怎么样才能让自己所做的图片显示在网页上``
另外还有很多上传图片空间,像http:\/\/images.eefoo.com\/等你也可以选择。其次,你上传了你的图片以后,要是支持外联的话,你就可以获得一个固定的图片网址。到你想把你的图片插入到网页上的时候,直接利用HTML代码或者复制都可以把它显示在网页上 参考资料:http:\/\/syuzhe.spaces.msn.com ...

津南区19551172649: 怎么让一张图片在网页上自适应宽高 -
塔劳盐酸: 一般定义一个全站大小,然后再安全一个大框div width:100%,图片定义一个max-width:1903px,width:100%就可以做到了,但是图片大小本身还是个问题,如果如果超出居中的话可以用上margin:0 auto ; background:url() center top大概也能做到.

津南区19551172649: 网页中如何使超出页面大小的图片自动适合页面宽度? -
塔劳盐酸: 这个问题我以前碰到过,其实很容易解决的.在<head></head>加入如下代码:<script language="javascript"> function CSize(cObj) { if (cObj.width>650) cObj.width=650; } 在加载图片时使用onload 事件:<img onload="CSize(this)" src="...."> 这样就可以实现了.在大多数情况下都能实现,有时也不能很好的执行.这时可以刷新页面看看.建议,整个IMG语句用Response.write 输出.--------------------- 补充:楼下的抄袭都不改个字啊.佩服佩服!BSing...

津南区19551172649: 网页图片怎么自适应宽高! -
塔劳盐酸: 这个你不需要js,只需要使用css就行了:1.给你的图片元素直接嵌套在一个div里面,这个div属性设置:{display:table-cell;text-align:center;vertical-align:middle;height:500px;width:600px;} 2.将img图片的css设置为:{max-width:500px;max-height:600px}完成!

津南区19551172649: 我想设计一个展示图片的网页,我想要实现的功能是无论图片长宽如何,给定宽度,高度自适应 -
塔劳盐酸: 在图片里指定宽度就可以了,高度会自动按宽度调整,如:<img width="150" src="图片地址" />

津南区19551172649: 怎么在做网页的时候让背景图片根据屏幕的分辨率而拉伸从而适应屏幕大小 -
塔劳盐酸: 可以设置图片的宽度和高度都为100%,之后可自适应屏幕大小.举例:<div class="zj02" style ="width:100%;height:100%;overflow:hidden;"><img src="zj_01.gif" /></div>;此时图片即可全屏幕显示,不会出现”超宽“现象.

津南区19551172649: 如何使网页制作背景图片自适应大小?
塔劳盐酸: 不知道你的背景图片是一整张,还是用一小片平铺效果.如果是平铺的,把你放背景图片的那个层的宽度设置成%(百分比)的形式,如:width:95%;这样的话就会随便的页面大小而变化.

津南区19551172649: 使网页上的过大的照片自动适应浏览器窗口大小,如何设置? -
塔劳盐酸: 网页能有多大,照片比网页还大?!!这种情况按照我的经验——你把屏幕的分辨率调太大了.或者你把网页的缩放比例调太大.先试试在网页右下角的比例调成100%,如果不行再调分辨率.

津南区19551172649: 网页图片大小自适应问题 -
塔劳盐酸: 可以用JS遍历页面里的图片,先是获得图片的原始宽度,得出比例,再通过这个宽度,比例,算出高度,然后修改图片的宽高.

津南区19551172649: 怎样让网页的背景图自适应分辨率大小 -
塔劳盐酸: 这位网友你好,想要网页宽度自适应,你需要把网页元素宽度设置为百分比,还要在网页头部加上代码:图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:img{ width:100%; max-width:100%;}

津南区19551172649: 怎么让图片在手机端自适应大小 -
塔劳盐酸: 首先看一下图片自适应的网页.(本图中的图片大小刚好占满浏览器)首先,我们在body中增加canvas标签: <canvas id="myCanvas">Your browser does not support the canvas element.</canvas><div> 本养老院占地面积是14000平方米...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网