189 8069 5689
HTML中的图片自适应屏幕的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！
创新互联公司服务项目包括滁州网站建设、滁州网站制作、滁州网页制作以及滁州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，滁州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到滁州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
首先我们看看HTML中的图片是如何自适应屏幕的：
让图片自适应屏幕大小最简单的方法，保证管用，你把那个图片写在div里面的背景里，也就是background:url(../img/1.jpg) center no-repeat;
这样就能够自适应屏幕大小了，而且不会出现横向的滚动条
首先是设置background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%;
这里就把图片固定在msg_desc里面了，方便吧。
注：在html里面插入图片，如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入：
img{height: auto; width: auto\9; width:100%;}width:auto;是宽度自动的意思。
“\9”是hack css 的一种写法，这种在正常css代码后面加"\9"的方式，只有IE浏览器才能识别，其他浏览器会忽略这条语句。这样就能做到差异化浏览器，来达到兼容浏览器的目的。
还有一种如何让网页图片宽度和高度自适应的方法：
在我们设计网页的时候，经常会遇到图片自适应问题，实际这些工作完全可以交给浏览器来完成就可以了，只可惜，无论是IE还是FIREFOX在图片自适应这个问题上都处理的不尽人意，网上实现网页图片宽度和高度的方法也很多。
今天介绍的这种是使用CSS来完成，根据实际的应用效果来说，使用Javascript还是比较靠谱一点，因为CSS的expression的确有点烦，小编是指使用效果上有点恼人，仅供大家参考使用。
使用CSS实现图片的自适应
使用CSS实现图片自适应很简单，主要靠两个参数来完成，分别是max-width和max-height，这两个参数在FIREFOX和IE7以 上支持都很好，但是在IE6上面，效果非常糟糕，尤其是对于多张图片的显示，第一次显示网页大都很难达到图片自适应的效果，一般都是有些能自适应，有些不 能自适应，多次刷新可能又显示OK，就是这点就足够烦人，而且一旦显示多张图片，IE 6上就卡的要命（expression在IE上比较占用资源，感觉设计是用来玩得，FIREFOX自适应效果还是比较好，速度也非常快），反正笔者至今是 没有找到更好的CSS方法来让IE 6完美支持图片自适应。
示例代码如下：
img{
max-width: 128px;
max-height: 128px;
height:auto;
zoom:expression( function(e) {
if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }}
else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }}
e.style.zoom = '1'; }(this));
overflow:hidden;
}上面代码格式上需要特别注意两点：
zoom属性里宽高赋值不能带单位（如px），否则无效；
if和else语句也必须带大括号括起来，单句指令也不行（而在很多编程语言里，单句指令可以无需大括号）；
最后一个种放置背景图片的方法：
首先看你的背景图片大小，如果很大的话，一般情况下很多显示器都会显示的合适。
如果是想适应移动设备的，用一个CSS3属性
background-size:cover;
就可以了，可以将背景图根据窗口大小铺满整个浏览器窗口。
感谢各位的阅读！看完上述内容，你们对HTML中的图片自适应屏幕的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。