⑴ 网页调整了style.css 以后,手机网站,图片显示超出了屏幕。怎么改为适应屏幕大小
这位网友你好,想要网页宽度自适应,你需要把网页元素宽度设置为百分比,还要在网页头部加上代码:
图片自适应,且不超过原始大小,需要设置最大宽度,代码如下:
img{
width:100%;
max-width:100%;}
⑵ css 如何把背景图占满整个屏幕
background: url(../images/login/theme4.jpg)centercenterno-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100%;background-size的属性可以调整试试cover,100%等
⑶ css图片自适应手机屏幕
1)按你的操作,读取当前的宽度然后设置到样式中:
var h = $(window).width();
$(".mymsg").css("width", h);
2)css操作:
设置一个div,设置div的宽度为100%,然后设置img的宽度为100%
⑷ 如何用CSS或者JS设置一张图片,让手机横屏(宽480)看或者竖屏(宽320)看都是满屏。
图片宽度设成100%,理论上不是单色图案、重复背景图案、或js动态生成的画布上的矢量图,jpg之类的是没办法满屏的,320的时候满屏了,横过来看480的时候,高度又少了,可视区外还有一截。
⑸ css怎样让背景充满整个屏幕
HTML
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>
给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。
其实,该方案对所有的块级容器都可以生效。块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。
CSS body标签的样式如下:
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
上面最重要的一条就是:
background-size: cover;
这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。
这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。都知道,当把一个图片拉伸时,图片会变模糊。
因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。
同时,为了让背景图始终相对于viewport居中,声明了:
background-position: center center;
上面的规则会把背景图缩放的原点定位到viewport的中心。
接下来需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。希望背景图始终相对于viewport固定,即使用户滚动时也是一样。
解决办法就是:
background-attachment: fixed;
⑹ css怎么占满手机屏幕
nav{font-size:16px;}
@media screen and (min-width:320px){/*屏幕宽度于等于320像素,nav字体改14种用刷新自判断必须要写原本式面*/
nav{font-size:14px;}
}
/*同理*/
@media screen and (max-width:320px){/*宽度于等于320,同理*/
}
⑺ css如何让图片全部显示
操作如下
1、使用CSS设置图片所在DIV的宽高为百分之百。
2、使用background–size:cover;样式设置图片全屏并随屏幕缩放。
以下图片仅供参考
⑻ css背景图怎么在手机自适应全屏
根据页面设计情况选择相应的参数,方法就是设计背景size参数
background-size:cover ,适用于上半部分背景图片,下半部分纯色
将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
background-size:contain 适用于一屏幕,缺点屏幕宽度高度不一致,会有缝隙
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
background-size:100% 100%;
最简单粗暴的方法,缺点会给背景拉伸变形
⑼ css 如何让图片全屏的问题
css设置背景图片全屏,如果只是将其当做一张图片显示,可以通过css控制。超大图片,引入进来即可根据大小缩放。
如果这张图片为背景图片由于背景图片不具有伸缩性,只能通过别的方法绕着解决,在ie中可以用,实现背景拉伸铺满整个浏览器,但其它的浏览器不支持。
⑽ CSS中如何设拉伸背景图片铺满屏幕
body{
background: url("image.png") no-repeat;
height:100%;
width:100%;
overflow: hidden;
background-size:cover;或者background-size:100%;
}
(10)css图片满手机屏幕扩展阅读:
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
编程工具
记事本:使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时,以.html为后缀名进行保存即可。
Dreamweaver:它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出充满动感的网页。