怎么用js改变html里面的图片大小,网页中图片属性固定宽度,如何用js改变大小...

您所在的位置:网站首页 设置图片高度和宽度 怎么用js改变html里面的图片大小,网页中图片属性固定宽度,如何用js改变大小...

怎么用js改变html里面的图片大小,网页中图片属性固定宽度,如何用js改变大小...

2024-01-09 07:23| 来源: 网络整理| 查看: 265

后台上传图片后,都有一个图片属性,会指定图片的宽和高,如果图片固定了宽度和高度,PC端用max-width可以控制最大宽度,高度自动缩放。但是手机端就没法自动缩放,可以使用js来改变图片的style,通过100%比例,当然也可以设置px固定的高度宽度。

下面这些代码是摘自网上,测试了下还是比较好使的,主要也是为了解决网站电脑端和手机端共用一套数据时,造成的图片变形问题,由于后台上传图片时会自动设置图片的宽高,pc端倒没什么影响,可是手机端就会导致变形,很是影响视觉效果。

当然也可以在上传的时候手动去掉图片宽和高的属性代码,但是这样操作比较麻烦,而且还会造成图片在后台编辑器中很大很大,影响编辑。

下面这些js代码,配合css代码,即可实现手机端图片正常显示效果。

html默认样式:

CSS:

.news_infos img { max-width: 650px;height:auto; }

js:

var aImg=document.getElementById("newsp").getElementsByTagName('img');

for(var i=0;i

aImg[i].style.height="100%";

aImg[i].style.width="100%";

}

或者 方法二:

var aImg=document.getElementById("newsp").getElementsByTagName('img');

for(var i=0;i

aImg[i].style.height="auto";

aImg[i].style.width="auto";

}

html更改后:

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%,和设置宽度这两种方法都不完美, 如果以前图多,已经固定了宽度,建议使用方法二



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3