dreamweaver 背景图片怎么自适应浏览器大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了dreamweaver 背景图片怎么自适应浏览器大小相关的知识,希望对你有一定的参考价值。

背景图片太大超出浏览器了,怎么让它自适应浏览器大小?
background-image: url(%E6%9C%80%E7%BE%8E%E7%9A%84%E5%85%83%E7%B4%A0%E5%91%A8%E6%9C%9F%E8%A1%A8.jpg

这窜代码应该加什么?

图片自适应屏幕大小显示主要是利用百分比来控制,切忌给图片宽度一个固定值。如下代码:
html代码:

<div class="imgbox">
<img src="图片地址" alt="">
</div>


此时的css可以写成:

.imgbox imgwidth:100%;


这样,图片的大小就会根据其父级容器的大小而变化,图片的宽度只设置百分比,这样可以根据浏览器窗口的大小变化而随时调整。

参考技术A 不是图片去适应浏览器 而是每个浏览器对像素的解析程度不同,加上有时桌面的分辨率也会造成乱码 解决的方法就是把像素换成百分比 50一下的单位可以是px 50以上的单位最好用百分比来表示最好 参考技术B 除了楼上两个的回答外,你可以试着把图片压缩到普通浏览器都能适应的大小,不要太大的都可以来自:求助得到的回答 参考技术B 可以的,但纯CSS是不能的,要用脚本配合,且背景图片要很大!本回答被提问者采纳 参考技术C 纯CSS 可能不可以, 你可以把背景图片做的大一些,或者找找相应的js

DIV+CSS宽度100% 怎么设置图片不变形,高度自适应

宽度100% 高度min-height 在宽屏幕显示下高度自适应缺隐藏了图片的下半部分。怎么解决宽度100%,图片不变形不隐藏

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:body background: url(image123.jpg) no-repeat; background-size: cover;。

3、浏览器运行index.html页面,此时图片既没有变形就能完整显示在网页上了。

参考技术A 你试试看img
width:100%
height;100%
行不行,这个就是自适应父容器的高度和宽度。
父容器必须设置高度值追问

这样banner 宽度不是100%了

追答

你默认的padding,margin去掉没你在最上面加个*
padding:0px;
margin:0px;

看看
*可以换成父元素,id值,CSS值

以上是关于dreamweaver 背景图片怎么自适应浏览器大小的主要内容,如果未能解决你的问题,请参考以下文章

css背景图片自适应,怎么调?

怎么让Div自适应高度

DIV+CSS宽度100% 怎么设置图片不变形,高度自适应

html5 怎么让图片自适应

css3怎么实现屏幕自适应

怎样用css控制图片自适应大小?