页面中的图片超过规定的大小就按原图片大小缩小,不超过的就按原样的JS处理方案

限制图片大小。类型js 限制图片大小。类型js限制图片大小。 立即下载
    我们经常会遇到在页面中的图片按照我们自己的大小来显示,这样可以让页面看起来更规范一些。
比如我们要在页面种显示130×160的图片,相当于我们将图片放入这样的一个相框那,超过的就缩放到这个框的大小,小的就原样显示。
    我们这里有2种解决办法,
    1,不按照比例的缩放
<script language="javascript">
function changeImg(mypic){
    
var xw=130;
    
var xl=160;

    
var width = mypic.width;
    
var height = mypic.height;
                    
    
if (width > xw ) mypic.width = xw;
    
if (height > xl ) mypic.height = xl;
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">
    2,按照比例的缩放
<script language="javascript">
function changeImg1(mypic){
    
var xw=160;
    
var xl=180;
        
    
var width = mypic.width;
    
var height = mypic.height;
    
var bili = width/height;        
        
    
var A=xw/width;
    
var B=xl/height;
        
    
if(A>1||B>1)
    {
        
if(A<B)
        {
            mypic.width
=xw;
            mypic.height
=xw/bili;
        }
        
if(A>B)
        {
            mypic.width
=xl*bili;
            mypic.height
=xl;
        }
    }
}
</script>
<img src="sh180.jpg" onload="changeImg(this)">
视频监控设备(NVR、IPC等)如何通过国标GB28181接入到视频监控平台,以及接入过程如何测试视频接入是否成功 GB/T28181标准广泛的应用,视频监控设备通过国标GB28181接入视频监控平台的过程变成程序化、标准化的互联过程,确保了视频监控设备能够在不同系统、不同网络环境下实现远程、跨区域、跨级别的访问和控制。版本有GB28181-2011、2016、2022几个常用版本,威迪斯特的视频监控平台完全支持GB28181的这几个版本,能够实现不同品牌视频监控设备的国标视频接入(国标视频监控接入),或者为国标28181视频接入(国标28181视频监控接入),也为国标281818接入(国标GB/T28181接入。 阅读详情

相关推荐

AniME框架深度体验:用AI自动生成《修真小说》动画全流程记录

本文详细记录了使用开源多智能体框架AniME,结合其核心动画生成模型AniSora V3,将一段修真小说文本自动转化为风格统一动画视频的全流程实战。文章深入解析了从环境搭建、导演智能体任务分解,到多智能体协作生成分镜、角色、动画及最终合成的每一步操作与挑战,为AI驱动的长视频创作提供了宝贵的实践经验与流程优化思路。

ol789012345的博客 626

js使图片不超过一定范围,并且不改变比例

//使图片不超过一定范围,并不改变比例 //使图片不超过一定范围,并不改变比例 function ImgReSize(e,width,height) { if(!arguments[2]) height = ((e.height)/e.width)*width; //如果不给高,高自动 ///alert("原来"+e.width+"|"+e.height);

IT技术宅-北方的刀郎 1211

HC-05蓝牙模块AT指令配置避坑全记录:从配对失败到稳定主从通信

本文详细记录了HC-05蓝牙模块AT指令配置的全过程,从基础认知到主从通信的稳定实现。涵盖了进入AT模式的方法、关键AT指令详解、主从配对流程及常见故障排除,帮助开发者快速掌握蓝牙串口模块的配置技巧,避免常见配对失败问题。

weixin_42632434的博客 416

css 让图片自适应变化

通过设置图片的最大宽度为100%,并保持高度自动调整,图片将根据容器宽度自动缩放,同时保持宽高比不变。这种方法也是常见的做法,设置图片的宽度为100%,高度自动,图片会填充容器宽度,同时保持原图的宽高比。以上方法可以根据具体需求选择使用,以实现图片在不同屏幕尺寸或容器尺寸下的自适应显示。在这两种布局模式下,图片作为容器的子元素,可以通过简单的设置实现自适应。对于特定场景,你可能希望图片完全填充容器但又保持原始比例,可以使用。属性在较旧的浏览器中可能不被支持,请确保检查你的目标浏览器兼容性。

qq_33240556的博客 5970

从零构建:Esp32+Esp-IDF驱动ST7789屏幕并集成LVGL图形库

本文详细介绍了如何从零开始使用Esp32和Esp-IDF驱动ST7789屏幕并集成LVGL图形库。内容涵盖环境准备、SPI驱动配置、屏幕初始化、LVGL图形库集成及常见问题排查,帮助开发者快速实现高效稳定的显示解决方案。

weixin_42657024的博客 525

深入剖析:功率放大电路设计精髓——从理论到实践

输入信号首先被调制(通常是PWM脉宽调制)成高频开关信号,驱动功率开关管(MOSFET),再通过LC低通滤波器滤除高频分量,还原出放大的音频信号。在靠近功放板电源引脚处放置足够容量的电解电容(如100uF - 1000uF)和高频瓷片电容(如0.1uF)并联进行电源去耦,抑制低频和高频干扰,防止低频振荡(Motorboating)和高频自激。,堪称电子世界里的“能量转换器”。当输入信号在零附近(即两个器件切换导通的区域)时,由于器件的开启电压(Vbe或Vgs)不为零,输出波形会出现明显的衔接不流畅的失真。

Zihan2558的博客 1698

【前端】js实现图片自适应

前言: 前几天写第一版代码的时候,测试跟我说,你这用户上传图片显示有问题啊,图像不是被拉宽就是被拉长了,不行啊。因为我给el-image设计的是固定长宽,如果图片不是这个比例,那直接就会变形了,如图 秒变鬼片有没有 后来我给图片固定了宽,长度为auto,这样一部分图片是没问题了,但是本来没有那么宽的图片又被强行拉宽了,也不行! 我还不信了,最终用一个js方法实现了图片的自适应,无论什么格式的图片,显示其比例都不会出错。 目录 前言: 一...

糯米w的博客 8673

电机控制中ADC采样时序的优化策略与实践

本文深入探讨了电机控制中ADC采样时序的优化策略与实践,重点分析了BLDC和FOC控制方案中的核心挑战与解决方案。通过硬件布局优化、软件滤波技术及动态时序补偿等方法,有效提升电流采样精度和系统稳定性,为电机控制系统的性能优化提供实用指导。

weixin_42519985的博客 387

js 图片加载时 按比例设置图片宽高_JS控制图片按比例缩放并不超过一定宽度和高度...

1.如何使用,html页面代码(此处定义一个图片图片按照(宽170px或者高120px缩放)) 2.js通用方法//JS控制图片按比例缩放并不超过一定宽度和高度//图片按比例缩放function DrawImage(ImgD, iwidth, iheight) {var flag = false;var image = new Image();//var iwidth = 620; ...

weixin_39610468的博客 642

解读区块链在制药和物流管理中具备的优势

供应链透明度是建立药品弹性供应链的关键,如何更好地促进端到端的透明度,促进合作伙伴和消费者之间的信任度是当前医药和物流行业高管们关注的话题,区块链技术可以很好的帮助他们。 链集市 · 让区块链落地更简单 《区块链行业观察》专栏·第 31 篇 作者丨Shams Rahman 图片丨来源于网络 作者介绍:本文作者为Shams Rahman教授,是RMIT大学商业IT和物流学院的供应链管理教授、研究与创新部门副主任。本文中文版本由链集市团队编译整理,英文版权归原作者所有,中文转载请联系编译。 新冠肺炎疫情的爆发

CECBC的博客 625

【FPGA教程案例89】编译码2——使用vivado核实现RS信道编译码

RS编码,又称里所码,即Reed-solomon codes,是一种前向纠错的信道编码,对由校正过采样数据所产生的多项式有效。当接收器正确的收到足够的点后,它就可以恢复原来的多项式,即使接收到的多项式上有很多点被噪声干扰失真。

FPGA/MATLAB学习教程/源码/项目合作开发 3543

页面中的图片超过规定的大小就按原图片大小缩小,不超过的就按原样的JS处理方案 选择自 WeekZero 的 Blog

我们经常会遇到在页面中的图片按照我们自己的大小来显示,这样可以让页面看起来更规范一些。 比如我们要在页面种显示130×160的图片,相当于我们将图片放入这样的一个相框那,超过的就缩放到这个框的大小,小的就原样显示。     我们这里有2种解决办法,     1,不按照比例的缩放 script language="javascript"> function changeImg(mypic){    

qdzx2008的专栏 1661

Python 爬虫实战:全面解析雪球网用户投资组合数据采集

本文介绍了如何使用 Python 爬虫技术,抓取雪球网用户的投资组合信息。通过模拟登录、解析页面内容等步骤,获取了用户的持仓数据。未来,可以进一步探索以下方向:

2201_76125261的博客 1304

页面中的图片超过规定的大小就按原图片大小缩小,不超过的就按原样的JS处理方案...

我们经常会遇到在页面中的图片按照我们自己的大小来显示,这样可以让页面看起来更规范一些。 比如我们要在页面种显示130×160的图片,相当于我们将图片放入这样的一个相框那,超过的就缩放到这个框的大小,小的就原样显示。 我们这里有2种解决办法, 1,不按照比例的缩放 <scriptlanguage="javascript"> functionchang...

weixin_30585437的博客 101

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

做了一个图片等比缩放的js

做了一个图片等比缩放的js 芋头发布在view:8447 今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里也曾遇到过要编写一个等比缩放的东西,后来不了了之,今天就一起解决了它吧. 1.等比缩放? 等比缩放就是一张图片按照比例缩放,而不是按照容器大小去缩放,那样会变形而...

weixin_34341117的博客 93

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

图片等比例缩放

(1)从网上查找的js代码,这段js代码是把图片按照规定的大小等比例不变形缩放后显示的,原图片大小不会变。 <img alt="" src="picture/DSCN1793.JPG" onload="DrawImage(this);" /> 这样在html代码中就不要指定width和height,若是指定的width和height和缩放后的大小不一样,图片就会...

weixin_30389003的博客 165

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Html显示图片时,超过规定尺寸大小,则同比缩放图片显示,保持页面不变形的方法

Html显示图片时,超过规定尺寸大小,则同比缩放图片显示,保持页面不变形的方法: .L_center_img img{ max-height:145px; max-width: 120px; vertical-align:middle; }

ma451152002的专栏 3万+

JS控制图片按比例缩放并不超过一定宽度和高度(居中对齐)

//JS控制图片按比例缩放并不超过一定宽度和高度         function Wa_SetImgAutoSize(obj) {             //var img=document.all.img1;//获取图片             var img = obj;             var MaxWidth = 630; //设置图片宽度界限

bodilove的专栏 4546

JS控制图片按比例缩放并不超过一定宽度和高度

1.如何使用,html页面代码(此处定义一个图片图片按照(宽170px或者高120px缩放)) 2.js通用方法 //JS控制图片按比例缩放并不超过一定宽度和高度 //图片按比例缩放 function DrawImage(ImgD, iwidth, iheight) { var flag = false; var image = new Image(); /

bodilove的专栏 6702

js图片大小限制,设置

//图片大小自动脚本 function AutoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg.src; var hRatio; var wRatio; var Ratio = 1;...

weixin_34348111的博客 158

HTML标签img--改变图片尺寸

1、统一大小? 我的网页上面有许多的图片,有的大,有的小,我想如果图片大的实现缩放,所有的都是一般大。来看看没有是什么效果。 大家看的出来,非常的难看的,于是我想让有没有一种方法是把那个大的变成小的呢? <li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=4...

This My Life - chisj 9万+
上一篇: 关于datagrid的几点简单应用
下一篇: 根据内容自动调整弹出窗口大小的JS解决方案
WeekZero
博客等级 码龄21年 5粉丝 9原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值