Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >图片在父容器中按比例缩放算法

图片在父容器中按比例缩放算法

作者头像
小贝壳
发布于 2020-03-05 07:05:38
发布于 2020-03-05 07:05:38
98300
代码可运行
举报
文章被收录于专栏:贝塔博客贝塔博客
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/**
 * w1在w2中按比例缩放
 * @param w1
 * @param h1
 * @param w2
 * @param h2
 */
function scale(w1, h1, w2, h2) {

    var v1 = w1 / w2;
    var v2 = h1 / h2;
    var r1 = w1, r2 = h1;

    if (w1 > w2) {
        r1 = w2;
        r2 = (w2 / w1) * h1;
        if (r2 > h2) {
            r2 = h2;
            r1 = (h2 / h1) * w1;
        }
    }

    if (h1 > h2) {
        r2 = h2;
        r1 = (h2 / h1) * w1;
        if (r1 > w2) {
            r1 = w2;
            r2 = (h2 / h1) * w1;
        }
    }

    return {
        width: r1,
        height: r2
    }
}

r = scale(300, 600, 800, 500);
console.log(r)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-06-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Java中图片处理工具类——能满足各种需求
在多年Java开发过程中我总结了一些处理图片的方法,把代码分享出来与大家一起学习,代码如下: import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.awt.image.RenderedImage; import java.io.File; import java.io.FileOutputStream; import
用户1289394
2018/02/27
5.4K0
图片等比例缩放方案
在Web开发时无可避免的需要将图片进行缩放,缩放时需要保证图片不变形,也就是需要等比例缩放。
WindRunnerMax
2020/08/27
6.9K0
熬夜总结了 “HTML5画布” 的知识点(共10条)
(xStart,yStart)是线段的起点,(xEnd,yEnd)是线段终点。起点到终点之间的颜色呈渐变。
小灰
2020/08/02
7.2K0
前端html网站页面图片点击放大
有勇气的牛排
2023/06/25
1.9K0
06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(下)
矩 阵 变 化 其实像 translate(移动),scale(缩放),rotate(旋转)都是特殊的矩阵变换 transform(m11,m12,m21,m22,dx,dy) 替换当前的变换矩阵(transform() 允许您缩放、旋转、移动并倾斜当前的环境) http://www.w3school.com.cn/tags/canvas_transform.asp 参数图解 本质公式 参数详解 水平缩放绘图 m11 水平倾斜绘图 m12 垂直倾斜绘图 m21 垂直缩放绘图 m22 水平移动绘图 dx 垂直
逸鹏
2018/04/09
1.4K0
Canvas
http://www.w3c.org/TR/2dcontext/ https://html.spec.whatwg.org/
jinghong
2020/05/09
13.1K0
Canvas
【D3使用教程】(3) 添加比例尺
一般而言,任意数据集中的值不可能刚好与图表中的像素尺度一一对应。而D3中,比例尺要做的就是将数据值映射为可视图形中的可替代值得手段。
前端修罗场
2023/10/07
3730
【D3使用教程】(3) 添加比例尺
一文深入浅出cv中的Attention机制
在深度学习领域中,存在很多专业名词,第一次看的时候总会很懵逼~后面慢慢看得时候才会有那么感觉,但是总觉得差点意思。今天我们要说的一个专业名词,就叫做Attention机制!
AIWalker
2021/04/30
1.4K0
一文深入浅出cv中的Attention机制
HTML5 学习总结(四)——canvas绘图、WebGL、SVG
一、Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及
张果
2018/01/04
9.8K0
HTML5 学习总结(四)——canvas绘图、WebGL、SVG
设置壁纸 适应各种分辨率 center-crop 适度裁剪
参考stackoverflow上的android-wallpapermanager-crops-image 依旧是无效的,图片没失真,但屏幕的留白太多。如图3.2.
平凡的学生族
2019/05/25
2.4K1
D3比例尺与坐标轴
例如[0, 1]对应到[0, 300],当输入0.5时,输出150。或者将[0, 1, 2]对应到["red", "green", "blue"],当输入2时,输出blue。
前端_AWhile
2020/05/18
3.1K0
tensorflow 1.01中GAN(生成对抗网络)手写字体生成例子(MINST)的测试
为了更好地掌握GAN的例子,从网上找了段代码进行跑了下,测试了效果。具体过程如下: 代码文件如下: import tensorflow as tf from tensorflow.examples.
sparkexpert
2018/01/09
1.3K0
tensorflow 1.01中GAN(生成对抗网络)手写字体生成例子(MINST)的测试
图片滑动-兼容手机与pc端 原
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
1.9K0
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
M端使用GPS;PC使用IP地址:精度低;IP经常会变,需要一个IP库(网上搜有,如ip.taobao.com)
前端修罗场
2023/10/07
2670
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
23个项目管理经典案例_交互动画
注意: speed = (end - box.offsetLeft)/20; 代表用(终点位置-当前位置)/动画系数 动画系数可以控制动画的快慢
全栈程序员站长
2022/11/03
1.8K0
YOLOv5学习总结(持续更新)「建议收藏」
首先感谢江大白大佬的研究与分享,贴上链接 深入浅出Yolo系列之Yolov5核心基础知识完整讲解 将yolov3-v5的变化讲的很清楚,思路很清晰,值得花时间好好从头到尾读一遍。
全栈程序员站长
2022/07/28
1.5K0
YOLOv5学习总结(持续更新)「建议收藏」
「数据可视化库王者」D3.js 极速上手到Vue应用
D3近年来一直是 JavaScript最重要的数据可视化库之一,在创建者 MikeBostock的维护下,前景依然无量,至少现在没有能打的:
前端劝退师
2019/08/16
8.9K0
「数据可视化库王者」D3.js 极速上手到Vue应用
在HbuilderX中实现微信小程序下蓝牙连接打印机完整实战案例
商家打印小票,小票包含顾客消费的商品明细信息以及末尾附上二维码,二维码供顾客扫码开票。 
跟着飞哥学编程
2022/11/30
2.6K0
在HbuilderX中实现微信小程序下蓝牙连接打印机完整实战案例
JS 事件循环、微任务和宏任务
JS 是单线程执行的,所有 JS 代码都要放在主线程中运行。 如果把异步 IO 等耗时较长的任务也放在主线程中处理,会阻塞后续同步代码的执行,造成卡顿等现象。因此,浏览器等运行环境额外设置了异步处理线程,专门用于处理异步事件。
lonelydawn
2021/09/26
1.4K0
仿抖音循环上下滚动视频播放+特效演示
github代码地址:https://github.com/Miofly/mio.git
用户10106350
2022/10/28
1.6K0
仿抖音循环上下滚动视频播放+特效演示
推荐阅读
相关推荐
Java中图片处理工具类——能满足各种需求
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验