㈠ 怎么让图片适应手机屏幕
需要自行裁剪哦,或者壁纸功能里面支持裁剪才可以适应手机屏幕的长宽比。
㈡ 织梦手机版标签点击会连接到电脑,请问如何修改让他自适应手机版的!
你如果是写的css样式,就在css文件里面找到屏幕宽的的数据下的元素样式,都去掉,就是包含screen的,如果是用js跳转的,那就把js部分给删除,别删错了就行,还不会再
可以查找CSS文件里面的这个@media screen and (max-width: 1199px) ,这个是代表最大1199px 宽度的屏幕,当然括号里面的数字也有多少到多少之间或小于多少最小多少的设置数值, 可以把这类代码均剪切放到另外的文档中保存,然后重新刷新网页查看是否与PC端一样。 最近总有用法反应说是在本站下载的织梦模板中,有部分模板说是手机端端的图片不能自适应大小。这个问题应该不会出现在本站的手机模板中,最后发现这几个用户都是从其他渠道下载的模板,真是一把汗啊。但是织梦模板网还是帮他们解决了问题,这边把方法分享出来。
手机端图片变形原因:
由于织梦后台编辑器上传图片,会自动获取图片尺寸,产生代码为:
<img alt="图片" src="图片路径" style="width: 800px; height:500px">
我们可以看到图片被限制了尺寸,那么我们在小于这个尺寸视窗下浏览时,就会变形。
织梦手机端图片自适应解决办法:
找到PHP系统文件:include/ arc.archives.class.php,先备份下这个文件,然后查找代码:
//设置全局环境变量
$this->Fields['typename'] = $this->TypeLink->TypeInfos['typename'];
@SetSysEnv($this->Fields['typeid'],$this->Fields['typename'],$this->Fields['id'],$this->Fields['title'],'archives');
在其下面添加:
//去掉img的width和height
$this->Fields['body'] = preg_replace("/style=\"width\:(.*)\"/","",$this->Fields['body']);
保存上传替换文件,然后生成,再查看源代码,我们会发现,自带的图片width和height属性 被成功的去掉了。
上面的方法就是针对“织梦DedeCMS手机端文章内容页图片不能自适应的解决办法!”,方法是完全可行的。
如果你的手机站图片不能自适应,可以尝试这种方法自行解决问题。
㈢ php如何处理已定义宽高的图片达到手机端自适应
众所周知,一张图片如果在PC端和手机端自适应的话,只需要定义图片的宽度为100%,即img{width:100%;},或者在手机端定义图片的最大宽度max-width属性,我推荐大家使用第一种。但是大家在编辑内容上传图片的时候,有的编辑器会自动给img标签加上宽高属性,如图所示:
这样的话就不会在手机端正常显示,达不到我们想要的100%的效果,如果图片少的话大家可以手动清除格式,但是如果图片很多的情况下手动会浪费很多时间,那么如何清除批量清除这些格式那?解决这种情况有很多种方法,现在给大家提供一种PHP服务端的解决方案。
㈣ 怎样把图片设置成适应手机屏幕的大小
用尺量下你的手机屏幕大小长宽,然后在Photoshop里新建个页面大小设置同比例的手机屏幕长宽,然后打开你需要的图片导入到这个新建的页面,适当的在里面放大缩小到你所需要的图片效果,就ok了
㈤ css 移动端精灵图怎么自适应
两个思路,一个是图片设置百分百宽度,一个是不同的浏览器宽度使用不同的CSS,全站自适应使用的是后一个思路
㈥ 手机网页中的图片根据屏幕大小自适应 怎么弄
根据你要做的产品图或banner图,外面的div要设置宽度、高度。里面的图片再设置 width:100% height:auto,
㈦ 怎么让图片在手机端自适应大小
首先看一下图片自适应的网页。(本图中的图片大小刚好占满浏览器)
首先,我们在body中增加canvas标签:
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<div> 本养老院占地面积是14000平方米,建筑面积5000平方米。园林面积为7000平方米。</div>
注:这里极力推荐使用html5的canvas标签,使用传统的img标签经试验有一系列问题,小编暂时没找到可自适应的简便方法。
此时刷新页面查看效果,发现注释已经显示出来,且页面上面的花瓣canvas已经预留出空间,如图:
为canvas标签增加自定义背景:
#myCanvas {
background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
background-size: 100%;
}
注:url中是图片的路径,大家需自行修改。
这时候查看页面效果,发现图片已经展示,但是未占满整个浏览器。
使用css定义body、canvas标签样式:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#myCanvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: block;
}
这时候刷新页面,发现图片已经自适应了。目的达成。
㈧ HTML页面如何自适应手机端,自动放大或者缩小
用CSS3 @media 查询 也叫“媒体查询”;
语法:
.aaa{width:1200px;} //正常样式
//下面是分辨率最小为300px,最大分辨率为1024px的样式
@media screen and (min-width: 300px) and (max-width:1024px) {
.aaa{width:375px;}
}
可以参考:菜鸟教程CSS3 @media 查询
㈨ 手机网页中的背景图片怎么自适应
background-size:100% 100%;这样就可以了,只要元素自适应,背景自然会自适应,所以元素要改成百分比的形式。
㈩ html5手机页面背景图片自适应大小问题
1,输入position:fixed;top:0;left:0;将整个div固定在屏幕的顶部和左侧。