精华内容
下载资源
问答
  • } 第三步:js获取图片高度比较并给img添加类名 //需要注意的是,不能在css中直接给img设置宽度和高度 //否则在img.onload后获取的宽高是css设置的宽高 //同时建议使用dom对象来获取img标签 var list = document....

    前言

    相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况。

    例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传时做手动裁切,让用户或客户清晰的感知到图片的有效内容才是最优的解决方案,但是在其他各种外在因素下,没有做裁切的话,就需要在前端显示上做处理了,满足在上传任意大小图片的情况下,最优显示效果的需求。

    这时我们需要考虑到极端效果,如下图:

    63c5c3394bfc604bd12b62ac1097d0fe.png

    而我们想要得到的效果是这样的------

    9bbdb1744af22883130073debd1a899c.png

    把图片放进框框,要几步?三步...我们开始

    第一步:先画个框框 (这里顺便安利一种自适应框框的方法)

    // 假定需要一个在750px屏幕下宽400px,高280px的盒子

    // 宽度 = 400 / 750 = 0.5333

    // 高度 = 280 / 400 * 0.5333 = 0.3733

    .img-box{

    position: relative;

    width: 53.33%;

    height: 0;

    padding-bottom: 37.33%;

    overflow: hidden;

    background-color: #eee;

    }

    ...

    第二步:设置图片需要使用到的css

    .width{

    position: absolute !important;

    width: 100% !important;

    min-height: 100% !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    -ms-transform: translateY(-50%) !important;

    -moz-transform: translateY(-50%) !important;

    -webkit-transform: translateY(-50%) !important;

    -o-transform: translateY(-50%) !important;

    display: block;

    }

    .height{

    position: absolute !important;

    height: 100% !important;

    min-width: 100% !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    -ms-transform: translateX(-50%) !important;

    -moz-transform: translateX(-50%) !important;

    -webkit-transform: translateX(-50%) !important;

    -o-transform: translateX(-50%) !important;

    display: block;

    }

    第三步:js获取图片高度比较并给img添加类名

    //需要注意的是,不能在css中直接给img设置宽度和高度

    //否则在img.onload后获取的宽高是css设置的宽高

    //同时建议使用dom对象来获取img标签

    var list = document.getElementById('list');

    getImgWH ( list );

    //执行宽高比对并设置img类名

    function getImgWH ( Obj ) {

    var img = Obj.getElementsByTagName('img');

    for( var i=0 ; i

    img[i].onload = function(){

    var width = this.width;

    var height = this.height;

    if ( width > height ) {

    this.classList.add('height');

    } else if ( width < height ) {

    this.classList.add('width');

    } else {

    this.style.width = '100%';

    this.style.height = '100%';

    }

    }

    }

    }

    图片防止拉伸处理比较简单,但是在实际项目中需要得到足够的重视,一个web页面成也图片,败也图片,拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    展开全文
  • javascript修改IMG标签的SRC刷新问题

    千次阅读 2012-06-01 10:17:26
    javascript修改IMG标签的SRC刷新问题   1.当点击某一按钮的时候,把图片域中的图片改变一下    看不清    function refresh()  {  document.getElementById(randimg).src="/servlet/...

    javascript修改IMG标签的SRC刷新问题

     

    1.当点击某一按钮的时候,把图片域中的图片改变一下
        <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" />
        <span style="cursor:hand" οnclick="refresh();return false;">看不清</span>
        <script>
            function refresh()
            {
                document.getElementById(randimg).src="/servlet/CreateValidateNum";
            }
        </script>

    2.说明
        ”servlet/CreateValidateNum“是JAVA写的servlet。该servlet是打印出图片

    3.出现的问题
        在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新

    4.情况分析
        如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。
        但像”验证码“这种功能。新旧图片的地址是一样的。
        鉴于上述情况,怀疑有可能是因为图片地址是一样的,而导致浏览器自动读缓存。

    5.解决方法
        把javascript改成这样即可:
        document.getElementById(randimg).src="/servlet/CreateValidateNum?"+Math.random();
        即:每次的访问地址都不一样,因为有加随机数。所以问题解决
    成功了~!!!!

    展开全文
  • } 第三步:js获取图片高度比较并给img添加类名 //需要注意的是,不能在css中直接给img设置宽度和高度 //否则在img.onload后获取的宽高是css设置的宽高 //同时建议使用dom对象来获取img标签 var list = document....

    在web开发中,作为前端经常会遇到处理图片拉伸问题的情况。

    例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,

    而一旦牵扯图片,就会涉及到图片拉伸的问题,

    当然,在图片上传时做手动裁切,让用户或客户清晰的感知到图片的有效内容才是最优的解决方案,

    但是在其他各种外在因素下,没有做裁切的话,就需要在前端显示上做处理了,

    满足在上传任意大小图片的情况下,最优显示效果的需求。

    这时我们需要考虑到极端效果,如下图:

    bV0UVM?w=2544&h=773

    而我们想要得到的效果是这样的------

    bV0U5W?w=2544&h=773

    把图片放进框框,要几步?三步...我们开始

    第一步:先画个框框 (这里顺便安利一种自适应框框的方法)

    // 假定需要一个在750px屏幕下宽400px,高280px的盒子

    // 宽度 = 400 / 750 = 0.5333

    // 高度 = 280 / 400 * 0.5333 = 0.3733

    .img-box{

    position: relative;

    width: 53.33%;

    height: 0;

    padding-bottom: 37.33%;

    overflow: hidden;

    background-color: #eee;

    }

    ...

    第二步:设置图片需要使用到的css

    .width{

    position: absolute !important;

    width: 100% !important;

    min-height: 100% !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    -ms-transform: translateY(-50%) !important;

    -moz-transform: translateY(-50%) !important;

    -webkit-transform: translateY(-50%) !important;

    -o-transform: translateY(-50%) !important;

    display: block;

    }

    .height{

    position: absolute !important;

    height: 100% !important;

    min-width: 100% !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    -ms-transform: translateX(-50%) !important;

    -moz-transform: translateX(-50%) !important;

    -webkit-transform: translateX(-50%) !important;

    -o-transform: translateX(-50%) !important;

    display: block;

    }

    第三步:js获取图片高度比较并给img添加类名

    //需要注意的是,不能在css中直接给img设置宽度和高度

    //否则在img.onload后获取的宽高是css设置的宽高

    //同时建议使用dom对象来获取img标签

    var list = document.getElementById('list');

    getImgWH ( list );

    //执行宽高比对并设置img类名

    function getImgWH ( Obj ) {

    var img = Obj.getElementsByTagName('img');

    for( var i=0 ; i

    img[i].onload = function(){

    var width = this.width;

    var height = this.height;

    if ( width > height ) {

    this.classList.add('height');

    } else if ( width < height ) {

    this.classList.add('width');

    } else {

    this.style.width = '100%';

    this.style.height = '100%';

    }

    }

    }

    }

    图片防止拉伸处理比较简单,但是在实际项目中需要得到足够的重视,

    一个web页面成也图片,败也图片,

    拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

    展开全文
  • javascript修改IMG标签的SRC

    千次阅读 2014-03-28 14:58:47
     <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" />  ();return false;">看不清    function reflush()  {  document.getElementById(randimg).src="/servlet/...

    本文转自:http://hi.baidu.com/richard__wang/item/3b38e6d375c62a2b39f6f7af

    1.当点击某一按钮的时候,把图片域中的图片改变一下

        <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" />
        <span style="cursor:hand" οnclick="reflush();return false;">看不清</span>
        <script>
            function reflush()
            {
                document.getElementById(randimg).src="/servlet/CreateValidateNum";
            }
        </script>

    2.说明
        ”servlet/CreateValidateNum“是JAVA写的servlet。该servlet是打印出图片

    3.出现的问题

        在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新

    4.情况分析
        如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。
        但像”验证码“这种功能。新旧图片的地址是一样的。
        鉴于上述情况,怀疑有可能是因为图片地址是一样的,而导致浏览器自动读缓存。

    5.解决方法
        把javascript改成这样即可:
        document.getElementById(randimg).src="/servlet/CreateValidateNum?"+Math.random();
        即:每次的访问地址都不一样,因为有加随机数。所以问题解决
    展开全文
  • javascript修改IMG标签的SRC实现验证码时,IE正常,火狐和google出状况1.当点击某一按钮的时候,把图片域中的图片改变一下 "/servlet/CreateValidateNum" width="60" height="20" /> 看不清 function reflush() {...
  • img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" /&gt; &lt;span style="cursor:hand" onclick="reflush();return ...
  • Vue 项目中v-html 修改img图片大小

    千次阅读 2020-09-07 14:38:23
    最近在做vue项目中,因为详情的页面是通过富文本...查找资料进行修改方法如下: this.clauseDetailContent = this.clauseDetailContent.replace(/<img/g, "<img style='max-width:100%;height:auto;'"); ...
  • 今天修改网站的上传头像时,谷歌浏览器中放大缩小图片,图像消失的bug。 调试时发现动态处理图片时有问题: var img = new Image(); img.src = $("#xxx").attr("src"); var _width = img.width; var _height = ...
  • js获取img宽高

    千次阅读 2018-04-18 17:02:10
    知识点1如果写了var img = new Image(100 ,100), img.src = ‘1.png’ ,这样的作用是可以把img缓存到浏览器中,常用来做图片预加载。...js代码:var imgW = document.getElementsByTagName('img')[0]....
  • 使用js给一个div下所有img标签添加点击事件,测试时点击后没有执行,浏览器报错TypeError: document.getElementById(...) is null,要怎要修改?代码:function showimg() {document.getElementById("showImg")....
  • 最近在写前端时遇到这样的需求:通过选定本地图片来更改前端用户...(暂时只能修改Img组件的背景,还未尝试其他组件) <html> <head> <title>Img组件动态修改</title> </head> <b...
  • function ResizePic() {$(‘img‘).each(function () {var maxWidth = 450; // 图片最大宽度var maxHeight = 750; // 图片最大高度var ratio = 0; // 缩放比例var width = $(this).width(); // 图片实际宽度var ...
  • 转载:... vue+webpack解决css引用图片打包后找不到资源文件的问题 使用vue打包,通过css引用图片资源。 [css]view plaincopy .img{ height:500px; width:100%; backgro...
  • 最近在做网页的时候,需要动态修改icon,然后发现了img标签在样式中使用content属性的url可以进行修改起图片引用地址以达到修改的目的,但是使用了之后发现了坑,好像只有Chrome浏览器支持,FF等好多其它浏览器都不能支持...
  • JS修改CSS

    千次阅读 2009-09-14 11:20:00
    js修改css详解2009-02-07 15:11出处请看这里:http://hi.baidu.com/ahbzhehu/blog/item/3237bc301da8cc9ea9018ec0.htmlabc.cssCSS code.class1 { width:10px; background-color: red; }HTML codeDOCTYPE ...
  • var imgWH = CalcImgTiple(img.width, img.height); 但chrome中测试 无法获取到。img.width, img.height都为0 原因:当图片不是本地图片,而是网络图片 onload 在成功地装载了图像时调用的事件处理程序。 ...
  • 通过js修改html的标签属性

    千次阅读 2016-04-13 02:05:20
    在开 发一个详情页面时,通过调用iOS的UIWebView进行内容展示,本来很顺利...于是把一个能加载图片的html源码和一个不能加载图片的html源码进行分析对比,发现是img标签里面多了一个data-src属性。于是有了下面的故事。
  • js动态更换img的src问题

    千次阅读 2019-06-22 15:23:24
    在本地开发测试过程中,通过js动态更换img的src没有问题,图片正常切换,但是放在服务器上后测试发现,图片不显示,解决方法为:在对应onclick事件执行切换图片的js函数后加上一个return flase就行了,如onclick=...
  • JS修改图片的大小

    千次阅读 2016-12-01 00:10:00
    注:利用js是不能修改图片的实际大小的,修改的只是图片在标签中对应的width,height属性。 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经...
  • Js动态设置Img大小

    千次阅读 2014-09-17 19:58:00
    function ResizePic() { $('img').each(function () { var maxWidth = 450; // 图片最大宽度 var maxHeight = 750; // 图片最大高度 var ratio = 0; // 缩放比例 var wi...
  • JS修改style样式操作,产生的是行内样式。 使用className更改样式属性 <head> <style> div { width:100px; height:100px; background-color:pink; } .change { width:200px; height:200px; background-color:purple;...
  • img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'style', 'class', 'data-latex'], ins: ['datetime'], li: ['class', 'style'], mark: [], nav: [], ol: ['class',...
  • JS修改图片路径

    2019-05-27 22:00:00
    js Image()对象onload和预加载 95 // https://segmentfault.com/a/1190000011020722?utm_source=tag-newest 96 } 97 } 98 }; 99 script >   转载于:...
  • javascript修改网页的默认alert弹窗

    千次阅读 2017-09-27 18:29:25
    看着浏览器默认的alert有点不尽人意,而且不同的浏览器风格也不同,所以就想着整一个统一的,初写web前端,js不是用的很溜,自娱自乐。 效果预览 html代码如下:<!DOCTYPE html> 修改网页的默认alert弹窗 ...
  • 平时我们使用正则表达式更多的是提取、过滤等,比如提取html字符串中的图片呀等等,而最近遇到的一个问题是要给html字符串中的img标签增加style样式,就想到了使用正则表达式,主要是对正则表达式的使用。...
  • 如何用js控制img中src图片路径改变

    千次阅读 2013-05-15 16:39:58
    <div><img id="myimg" src="" alter="此处为大图片" width="500" height="500"> <img src="1.gif" onmouseover="changeImg(this.src)" onmouseout="changeBack()"> <img src="2.gif" onmouseover="changeImg(this....
  • JavaScript 生成二维码(修改qrcode.js添加icon支持)

    千次阅读 热门讨论 2019-01-04 17:08:16
    JS生成二维码,我用到的是 qrcode.js 这个插件,地址如下: https://github.com/davidshimjs/qrcodejs &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; ...
  • 今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完。 当我把高度由 auto 设置为固定值之后,又可以获取到该img的高度。可是我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,297
精华内容 26,118
关键字:

js修改img的height