当前位置: 首页 > 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 创建数据库
  • 美国防部监察机构扩大“群聊门”事件调查范围
  • 426.8万人次!长三角铁路创单日客发量历史新高
  • 人民日报社论:坚定信心、奋发有为、创新创造——写在“五一”国际劳动节
  • 马克思主义理论研究教学名师系列访谈|杜玉华:马克思主义是“认识世界”和“改变世界”的思维工具
  • 黄宾虹诞辰160周年|一次宾翁精品的大集结
  • 华夏幸福:去年营业收入237.65亿元,同比减亏12亿元