设为首页
收藏本站
本站导航
赞助会员
开启辅助访问
切换到窄版
登录
立即注册
只需一步,快速开始
网站首页
站长资讯
站长教程
有问必答
站长论坛
更多推荐
搜索
搜索
汇站互联
网址导航
符号素材
技术协助
本版
文章
帖子
用户
吾爱汇站网
»
站长论坛
›
站长之家
›
域名/虚机/服务器
›
网页中图片属性固定宽度,如何用js改变大小 ...
吾爱汇站网官方联系方式
工作时间:
周一到周五早上09:00-11:00, 下午03:00-05:00, 晚上20:30-22:30(周六、日休息)
汇站小张
汇站佳佳
汇站西西
汇站艳子
QQ: 211985957 168528823 97147700 53150916
汇聚、帮助、交流 E-Mail:
postmaster@5ihz.cn
用户交流QQ群
1群21532443
2群413446685
←提醒:请勿重复加群,谢谢!(本站提供低价收费技术服务,详情联系在线客服)
1
2
3
4
5
/ 5 页
下一页
返回列表
发新帖
网页中图片属性固定宽度,如何用js改变大小
[复制链接]
14389
|
47
|
2018-11-14 09:28:35
|
显示全部楼层
|
阅读模式
后台上传图片后,都有一个图片属性,会指定图片的宽和高,如果图片固定了宽度和高度,PC端用max-width可以控制最大宽度,高度自动缩放。但是手机端就没法自动缩放,可以使用js来改变图片的style,通过100%比例,当然也可以设置px固定的高度宽度。
html默认样式:
<div class="news_infos" id="newsp">
<p><img src="images/v1.jpg" style="width:300px;height:100px"></p>
</div>
复制代码
CSS:
.news_infos img { max-width: 650px;height:auto; }
复制代码
js:
<script type="text/javascript">
var aImg=document.getElementById("newsp").getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
aImg[i].style.height="100%";
aImg[i].style.width="100%";
}
</script>
复制代码
或者 方法二:
<script type="text/javascript">
var aImg=document.getElementById("newsp").getElementsByTagName('img');
for(var i=0;i<aImg.length;i++){
aImg[i].style.height="auto";
aImg[i].style.width="auto";
}
</script>
复制代码
html更改后:
<div class="news_infos" id="newsp">
<p><img src="images/v1.jpg" style="width:100%;height:100%"></p>
</div>
复制代码
100%这个方案不是很完美,如果图片上传的大小没有超过650,那么PC端图片会被放大。还有一种解决方案就是,编辑后台内容的时候,将图片属性后面的width,height值都删掉,让css来控制就行了。同样用max-width来控制图片大小,小图<650px,图片不会被更改,>650px,图片宽度就是650px。,那么手机端就用100%来表示。
方法三 CSS:
.news_infos img { max-width: 650px;height:auto; }
@media only screen and (max-width: 480px) {
.news_infos img { width:100%; }
}
复制代码
这个的不好的地方就在于,每次编辑图片属性,都得删除后面的width,比较繁琐。
以上方法,都可以实现,但是100%,和设置宽度这两种方法都不完美, 如果以前图多,已经固定了宽度,建议使用方法二
回复
使用道具
举报
我叫小可爱
|
2018-11-14 09:31:42
来自手机
|
显示全部楼层
好,很好,非常好!
回复
支持
反对
使用道具
举报
兰庭一梦
|
2018-11-14 09:56:07
|
显示全部楼层
非常不错哈,就要这个了!
回复
支持
反对
使用道具
举报
风云天下
|
2018-11-14 10:07:59
来自手机
|
显示全部楼层
好资源啊,支持一下
回复
支持
反对
使用道具
举报
天之涯海之角
|
2018-11-14 10:13:40
|
显示全部楼层
我抢、我抢、我抢沙发~
回复
支持
反对
使用道具
举报
嘿,小哥
|
2018-11-14 11:33:31
|
显示全部楼层
看看有没有用啦谢谢啦
回复
支持
反对
使用道具
举报
美女张
|
2018-11-14 12:13:42
|
显示全部楼层
支持站长 这个厉害啦
回复
支持
反对
使用道具
举报
柏清奇
|
2018-11-14 12:38:59
来自手机
|
显示全部楼层
不错 支持一个了
回复
支持
反对
使用道具
举报
汉源
|
2018-11-14 12:53:57
|
显示全部楼层
好资源啊,支持一下
回复
支持
反对
使用道具
举报
薄荷近微凉
|
2018-11-14 14:48:04
|
显示全部楼层
这个也不错的哦
回复
支持
反对
使用道具
举报
下一页 »
1
2
3
4
5
/ 5 页
下一页
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
汉源
回复楼主
返回列表
建站教程
域名/虚机/服务器
有问必答
图文推荐
几个经常用到的网站伪原创文章相似度在线检测工具 ...
2018-09-16
突破网站禁止访问妙招
2019-03-08
百度搜索流量开始涌入智能小程序了
2019-03-11
公众号新出直播解决方案工具:“腾讯直播”
2019-03-13
seo写作:怎么满足搜索引擎的需求?
2019-03-17
热门排行
1
腾讯短视频平台“yoo视频”发布了
2
微信朋友圈推广广告是怎么收费的?
3
送你一份抖音企业号实用攻略
4
自媒体“网络水军”遭严打:关闭大V账号1100余个
5
突破网站禁止访问妙招
6
几个经常用到的网站伪原创文章相似度在线检测工具 ...
7
又一大流量贡献“头条小程序”上线了
8
百度搜索MIP闪电标下线