您现在的位置是：网站首页>网站制作心得网站建设教程
网页中图片属性固定宽度，如何用js改变大小
2019-06-25来源： 【网站建设教程】
人已围观
简介后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，PC端用max-width可以控制最大宽度，高度自动缩放。但是手机端就没法自动缩放，可以使用js来改变图片的style，通过100%比例，当然也可以设置px固定的高度宽度。
后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，PC端用max-width可以控制最大宽度，高度自动缩放。但是手机端就没法自动缩放，可以使用js来改变图片的style，通过100%比例，当然也可以设置px固定的高度宽度。
100%这个方案不是很完美，如果图片上传的大小没有超过650，那么PC端图片会被放大。还有一种解决方案就是，编辑后台内容的时候，将图片属性后面的width，height值都删掉，让css来控制就行了。同样用max-width来控制图片大小，小图＜650px，图片不会被更改，＞650px，图片宽度就是650px。，那么手机端就用100%来表示。
这个的不好的地方就在于，每次编辑图片属性，都得删除后面的width，比较繁琐。
以上方法，都可以实现，但是100%，和设置宽度这两种方法都不完美， 如果以前图多，已经固定了宽度，建议使用方法二
html默认样式：
<div class="news_infos" id="newsp">
<p><img src="images/v1.jpg" style="width:300px;height:100px"></p>
</div>
<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>
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>
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>
<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%; }
}
.news_infos img { max-width: 650px；height:auto; }
@media only screen and (max-width: 480px) {
.news_infos img { width：100%; }
}
这个的不好的地方就在于，每次编辑图片属性，都得删除后面的width，比较繁琐。
以上方法，都可以实现，但是100%，和设置宽度这两种方法都不完美， 如果以前图多，已经固定了宽度，建议使用方法二
很赞哦！ ()
猜您喜欢
相关文章
付费说明
1、安装cms后台，费用是200，基础费用200包括后台调试以及部分页面模板修改.
2、请加我个人微信 634626966，或者扫一扫微信二维码。备注“网站”
3、系统安装只限定于帝国cms，并且支持php，虚拟主机，请选择linux系统
4、【收费说明】制作企业网站，我是这么收费的！
空间购买
文章评论
点击排行
猜你喜欢
