前往小程序,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开发_jcrop_网页截图工具(插件)
===========================================
Hongten
2018/09/13
1.4K0
java开发_jcrop_网页截图工具(插件)
商城项目回顾整理(一)前台页面布局
登录页面: 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 6 <head> 7 <
二十三年蝉
2018/02/28
1.8K0
编程世界/前端技术/BootStrap/BootStrap插件组件使用总结
官方地址:https://github.com/smalot/bootstrap-datetimepicker 演示:https://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
全栈工程师修炼指南
2020/10/23
2.1K0
编程世界/前端技术/BootStrap/BootStrap插件组件使用总结
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fullcalendar这个日历插件功能很强大!下面我来附上几张图片:
故久
2019/09/29
5.6K0
fullcalendar日历插件的使用并实现增删改查
【Bootstrap】012-组件:按钮组、按钮式下拉菜单、输入框组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为;
訾博ZiBo
2025/01/06
1830
【Bootstrap】012-组件:按钮组、按钮式下拉菜单、输入框组
JQuery Ztree 树插件配置与应用小结
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/08/21
7.4K0
JQuery Ztree 树插件配置与应用小结
jQuery的使用
1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】
用户5927264
2019/07/31
8.3K0
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结
授客
2019/08/21
3.7K0
搭建一个VIP 视频解析网站
</head><body><div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 center-block" style="float: none;">
用户6256742
2024/07/11
7260
搭建一个VIP 视频解析网站
jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
星辰_大海
2020/10/09
7K0
jQuery 插件
jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的,所以必须要先引入
清出于兰
2020/10/26
7.3K0
jQuery 插件
jQuery 选择器
基本选择器 基本选择器是最简单的选择器,可以通过元素id、class和标签名等来直接查找DOM元素。 元素选择器 根据给定元素名匹配元素。如下选择的是所有div元素。 $("div").css("
静默虚空
2018/01/05
7.6K0
网站搭建-django-学习成绩管理-12-卡片
系统:Windows 10 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:JetBrains PyCharm Community Edition 2018.2.2 x64 Django:2.1.4 Python:3.6.0
zishendianxia
2021/05/13
1.1K0
网站搭建-django-学习成绩管理-12-卡片
day41_jQuery学习笔记_02
下面是jQuery 提供额外的事件,用于完善javascript缺失的事件 详解如下:
黑泽君
2018/10/11
3.9K0
探索 JQuery EasyUI:构建简单易用的前端页面
当我们站在网页开发的浩瀚世界中,眼花缭乱的选择让我们难以抉择。而就在这纷繁复杂的技术海洋中,JQuery EasyUI 如一位指路明灯,为我们提供了一条清晰的航线。
繁依Fanyi
2024/04/25
7940
BBS论坛(十五)
15.1.登录界面完成 (1)front/signbase.html {% from 'common/_macros.html' import static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{% block title %}{% endblock %}</titl
zhang_derek
2019/02/13
2.2K0
ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
bootstrap-css:【<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">】
红目香薰
2022/11/28
5090
Web阶段:第五章:JQuery库
点击:API文档下载 Jquery介绍 1.什么是JQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。 2.JQue
Java廖志伟
2022/09/28
26.5K0
Web阶段:第五章:JQuery库
初试JqueryEasyUI(附Demo)[通俗易懂]
  关于easyui不多说,对于我们这样没有美术功底的程序员来说,简直是大大的福利,园里面也有不少人在用,自己在整理一个个站,后台管理要用,正好可以学习下。网上找了相关的教程什么的,但是发现还是官网上的demo讲的狠详细,还有就是下载后的demo示例,但都是某个控件示例,很遗憾,没有整个系统的demo。
全栈程序员站长
2022/09/07
2K0
初试JqueryEasyUI(附Demo)[通俗易懂]
Python开发物联网数据分析平台---web框架
前端使用Bootstrap主题框架AdminLTE,后台使用python语言的tornado作为web框架。利用tornado的模板作为主要的动态页面生成方式,以及巧妙使用模板将json数据渲染到页面hidden元素的值,然后在js中直接用eval函数计算隐藏域的值来生成图表JavaScript插件所需的json数据来生成页面中相应的可视化图表。
MiaoGIS
2019/11/01
3.2K0
Python开发物联网数据分析平台---web框架
相关推荐
java开发_jcrop_网页截图工具(插件)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验