当前位置: 首页 > news >正文

js实现判断图片宽度高度不超过容器宽高度,刚好在容器中显示完

 实现类似如下图的contain功能

// js实现判断图片宽度高度不超过容器宽高度,刚好在容器中显示完
calcScaleWidthHeigth({
    containerWidth, //容器宽度
    containerHeight, //容器高度
    originWidth, //图片原始宽度
    originHeight, //图片原始高度
}) {
    // 计算缩放比例,使图片适应容器(保持宽高比)
    let scaleFactor = Math.min(
        containerWidth / originWidth,
        containerHeight / originHeight
    );
    // 设置图片的宽度和高度以适应容器,同时保持宽高比
    return {
        width: `${originWidth * scaleFactor}px`,
        height: `${originHeight * scaleFactor}px`,
    };
},

相关文章:

  • FreeRTOS学习(十):任务调度器挂起与恢复机制详解
  • mysql中的聚簇索引,什么是聚簇索引和非聚簇索引
  • Android14 Settings应用添加有线网开关条目实现
  • Android设计模式之Builder模式
  • uniapp用户登录及获取用户信息(头像昵称)
  • 阿里云国际站代理商:如何通过Serverless调用GPU资源?
  • Python基础语法元素(学习笔记)
  • 李泽湘和中国硬科技创新十年 | 媒体报道
  • 高并发电商商详网关系统设计:架构、优化与实战
  • SQL Server 锁类型介绍
  • c++ primer 阅读手记 第五章
  • C++中使用CopyFromRecordset将记录集拷贝到excel中时,如果记录集为0个,函数崩溃,是什么原因
  • 基于ngnix配置本地代理到对应服务器
  • 使用Pygame构建贪吃蛇游戏:从零开始的Python游戏开发之旅
  • leetcode 46 全排列 | 回溯
  • Selenium 简单入门操作示例
  • Oracle-rman restore遭遇RMAN-03002与ORA-19563
  • Linux实现生产者消费者模型(基于阻塞队列)
  • VideoGrain:ICLR2025收录,无需训练,实现细粒度多层次视频编辑
  • MySQL 创建数据库
  • 中国航天员乘组完成在轨交接,神十九乘组将于29日返回地球
  • 王庆成:儒家、墨家和洪秀全的“上帝”
  • 泽连斯基公布与特朗普会晤细节,强调实现全面、无条件停火
  • 女儿被偷拍后,一个父亲的战斗
  • 我驻美使馆:中美并没有就关税问题磋商谈判,更谈不上达成协议
  • 夜读丨囿于厨房与爱