Heim > Artikel > Web-Frontend > 不出现滚动条，图片自动缩放为屏幕_html/css_WEB-ITnose
不出现滚动条，图片自动缩放为屏幕_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:58:071121Durchsuche
回复讨论(解决方案)
style="width:100%"就是自动适应宽度，需要注意图片外面是否还有其他对象，如果有，一般采用js计算
有几种解决办法，分别适合不同的场景。
1. 背景图片。
background-image:url();background-size:100% 100%;
这种缺点是不兼容低版本ie浏览器。
2. 绝对定位，js计算宽高。
#a{position:absolute:top:0;left:0};
function getSize() { var winWidth = 0, winHeight = 0; if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } return { w : winWidth, h : winHeight };}var size = getSize();document.getElementById('a').width = size.w + 'px'; document.getElementById('a').heigth = size.h + 'px'; img{width:100%}
个人一般用：max-width:100%，这个样式。这个好处在于如果图片小于屏幕宽度时，不会被放大模糊，如果超出屏幕时，会自动调整为屏幕大小且不会变形。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,html{ margin:0px; height:100%;}</style></head><body> <div class="autoHeight"><img src="5398780_094651038992_2.jpg" style="max-width:90%" / alt="不出现滚动条，图片自动缩放为屏幕_html/css_WEB-ITnose" ></div></body></html> 我建议的方法：
如果图片只作图片处理：写css声明，将该图片的宽设auto, 高的设定，通过写段js事件在页面加载时，实现读取浏览器的窗口的高度附值到该img，那么你打开页面时，就绝对没有上下滚动条，但不排除左右有空白。
如果图片作为背景处理：写css声明一div，width:100%,overflow:hidden;通过写段js事件在页面加载时，实现读取浏览器的窗口的高度附值到该div，那么你打开页面时，就绝对没有上下左右滚动条。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：加入创业公司半年后的经验分享_html/css_WEB-ITnoseNächster Artikel：BFC(Block formatting contexts)初探_html/css_WEB-ITnose