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

后台上传图片后，都有一个图片属性，会指定图片的宽和高，如果图片固定了宽度和高度，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%，和设置宽度这两种方法都不完美，如果以前图多，已经固定了宽度，建议使用方法二

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

html多选框放在图片上,网页中图片格式问题地总结.doc
网页中图片格式问题地总结 HYPERLINK "file:///C:\\Users\\Administrator\\Desktop\\图片格式与设计那点事儿%20-%20TaobaoUED_ ...
html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。
为图片src 增加媒体查询. Css 中的媒体查询默认是没有为图片指定src,的但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候,加载大图,手机的时候加载小图. 今天发现一个很棒的 ...
js删除网页中图片width 和 height
js删除网页中图片width 和 height 一段代码轻松搞定适用于: 电脑端网页带图片属性导致移动网页显示错位/错误备注: 需搭配jquery.min.js (注!jquery-2.0以上版本 ...
php如何获取图片地址,js如何直接获取网页中图片地址
这次给大家带来js如何直接获取网页中图片地址,js直接获取网页中图片地址的注意事项有哪些,下面就是实战案例,一起来看一下. 第一种方法:js通过正则实现/** * 获取html代码中图片地址 * @p ...
拖放本地图片到网页中
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>拖放本 ...
html图片5秒后消失,如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
如何让网页中图片等待5秒再显示. 网页打开的时候,网页中的图片就会马上显示.如何让某一个图片,在网页打开后5秒在显示出来. 回复讨论(解决方案) 1. 图片载入有判别事件,在事件中设置图片对象的显示隐 ...
在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...
我们在开发动态网站的时候,一般都会在后台让用户添加文章,在添加文章的过程中难免用户会添加一些大的图片,这样,在前台显示的时候图片就会把页面撑的很大,很难看,今天就教大家利用JavaScript函数来实 ...
网页中图片旋转的几种实现方式
网页中图片旋转一般有下面三种常见的实现方式: 一. ie 滤镜 IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角.rota ...
Python3爬取网页中图片（2021-01-04 14:06:02），附上完整代码
Python爬取网页中图片,附上完整代码文章目录 Python爬取网页中图片,附上完整代码概述完整代码概述批量爬取数据,请遵循robots协议及相关网站协议及说明. 本代码仅供有需要爬取网页 ...

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

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

最新文章

热门文章