不出现滚动条，图片自动缩放为屏幕_html/css

不出现滚动条，图片自动缩放为屏幕_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:58:07

原创

1370人浏览过

稿定抠图

AI自动消除图片背景

查看详情

回复讨论(解决方案)

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，那么你打开页面时，就绝对没有上下左右滚动条。

大家都在看：

理解相对路径：如何在不同文件夹中引用CSS文件 Vue 3 中实现表格单元格点击切换文本内容的交互式显示 A-Frame中动态创建与添加实体：正确使用DOM API CSS实现文本下方装饰性图形的定位与生成教程实现CSS卡片平滑悬停效果：Transition属性的正确配置指南