您现在的位置是:网站首页>网站制作心得CSS3|HTML5

网页中图片属性固定宽度,如何用js改变大小

2019-06-25来源: CSS3|HTML5 人已围观

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

后台上传图片后,都有一个图片属性,会指定图片的宽和高,如果图片固定了宽度和高度,PC端用max-width可以控制最大宽度,高度自动缩放。但是手机端就没法自动缩放,可以使用js来改变图片的style,通过100%比例,当然也可以设置px固定的高度宽度。qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
 
html默认样式:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
        <div class="news_infos" id="newsp">qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
          <p><img src="images/v1.jpg" style="width:300px;height:100px"></p>qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
        </div>

CSS:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

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

js:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

 <script type="text/javascript">    qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      var aImg=document.getElementById("newsp").getElementsByTagName('img');qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
     for(var i=0;i<aImg.length;i++){qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      aImg[i].style.height="100%";qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      aImg[i].style.width="100%";qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      }      qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
  </script>   
 

或者 方法二:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
 qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案

 <script type="text/javascript">    qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      var aImg=document.getElementById("newsp").getElementsByTagName('img');qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
     for(var i=0;i<aImg.length;i++){qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      aImg[i].style.height="auto";qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      aImg[i].style.width="auto";qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
      }      qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
  </script>  
 
html更改后:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
        <div class="news_infos" id="newsp">qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
          <p><img src="images/v1.jpg" style="width:100%;height:100%"></p>qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
        </div>
qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
100%这个方案不是很完美,如果图片上传的大小没有超过650,那么PC端图片会被放大。还有一种解决方案就是,编辑后台内容的时候,将图片属性后面的width,height值都删掉,让css来控制就行了。同样用max-width来控制图片大小,小图<650px,图片不会被更改,>650px,图片宽度就是650px。,那么手机端就用100%来表示。qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
 
方法三 CSS:qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
.news_infos img { max-width: 650px;height:auto; }qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
@media only screen and (max-width: 480px) {qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
    .news_infos img { width:100%; }qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
}
qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
这个的不好的地方就在于,每次编辑图片属性,都得删除后面的width,比较繁琐。qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
qIJ淮安网络公司_企业网站模板免费下载_网站建设_企业网站建设方案
以上方法,都可以实现,但是100%,和设置宽度这两种方法都不完美, 如果以前图多,已经固定了宽度,建议使用方法二

很赞哦! ()

猜您喜欢

付费说明

    1、安装cms后台,费用是300,基础费用300包括后台调试以及页面模板修改.

    2、请加我个人微信 634626966,或者扫一扫微信二维码。备注“网站”

    3、系统安装只限定于帝国cms,并且支持php,虚拟主机,请选择linux系统

    4、静态页面,是指html页面,不能直接使用在dede,帝国CMS,wordpress,phpcms等常用的建站系统。

    5、【收费说明】制作企业网站,我是这么收费的!

文章评论

站点信息