js限制图片显示的大小

//缩放图片到合适大小
        function ResizeImages() {
            var myimg, oldwidth, oldheight;
            var maxwidth = 400;
            var maxheight = 400
            var imgs = document.getElementById(‘article‘).getElementsByTagName(‘img‘);   //如果你定义的id不是article,请修改此处

for (i = 0; i < imgs.length; i++) {
                myimg = imgs[i];

if (myimg.width > myimg.height) {
                    if (myimg.width > maxwidth) {
                        oldwidth = myimg.width;
                        myimg.height = myimg.height * (maxwidth / oldwidth);
                        myimg.width = maxwidth;
                    }
                } else {
                    if (myimg.height > maxheight) {
                        oldheight = myimg.height;
                        myimg.width = myimg.width * (maxheight / oldheight);
                        myimg.height = maxheight;
                    }
                }
            }
        }
        //缩放图片到合适大小
        ResizeImages();
    </script>

原文地址:https://www.cnblogs.com/4job/p/9962686.html

时间: 2024-11-10 11:42:07

js限制图片显示的大小的相关文章

【JS控制图片显示的大小(图片等比例缩放)】

效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

JS控制图片显示的大小(图片等比例缩放)

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/06/01/1749571.html Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

js获取图片的真实大小,字节大小

在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> <input type=&quo

[Web 前端] React Js img 图片显示默认 占位符

cp from : https://blog.csdn.net/wyk304443164/article/details/77093339 没有考虑到兼容性,因为我们暂时只适配了webkit. 也没有考虑到懒加载,因为项目比较紧有需要加的朋友看react-lazyload,也比较简单,现成的轮子 /** * Created by wuyakun on 2017/8/11. * 会显示默认图片的image */ import React from 'react'; class DefaultIma

js鼠标滑动图片显示隐藏效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码--> <meta http-equi

Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)

在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大量的金钱,同时也需要有人值守,从而使测试变成了半自动化,背离了自动化测试的初衷,也在一定程度上困扰了一定的自动化测试人员. 其实,不同分辨率下的测试,在一定程度上可以看做是浏览器窗口最大化后,浏览器可显示区域的页面样式兼容性测试.此文通过设置浏览器页面显示区域大小,从而摆脱上述种种问题的束缚.只需要

S实现控制图片显示大小的方法【图片等比例缩放功能】

S实现控制图片显示大小的方法[图片等比例缩放功能] [需求]:读取磁盘中的图片,展示在弹出框中,等比例缩放图片,使图片显示完全. (读取磁盘中的图片展示在前台,请参照我的另一篇文章:) [开发]: 调用说明: 直接调用js函数即可. 我测试是一个image 标签中直接调用,如下: <div> <img id="showImageimg"  src="/sirdifoa/applycorrection/getImage.do?imgName=2017001.j

FE: CSS固定图片显示大小及GitHub Pages在线演示

CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; margin: 1em; } 当然简单如下的html是不能限制图片大小的 <div class=“picture-area”> <img src=“…” alt=“…”> </div> 换个思路,将图片作为div的背景图片 <div style=“background-ima

JS修改图片的大小

注:利用js是不能修改图片的实际大小的,修改的只是图片在标签中对应的width,height属性. 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经设置过style属性),p.style.width='200px'(切记:此处是字符串,格式一定是:???px,不能只写个数字,否则在有的浏览器上图片的大小是不会改变的) 以下代码实现了每次点击按钮可以实现图片变大或缩小一点: