当前位置: 首页 > 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`,
    };
},

http://www.dtcms.com/a/93456.html

相关文章:

  • 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 创建数据库
  • ESP32-S3-N16R8的麦金塔小智AI机器人及配套游戏机(教程及相关固件)
  • SpringMVC请求与响应深度解析:从核心原理到高级实践
  • Java并发编程2(锁-Sychronized)
  • Linux: 静态库和动态库
  • 在 Linux(Ubuntu / CentOS 7)上快速搭建我的世界 MineCraft 服务器,并实现远程联机,详细教程
  • 【C语言】深入理解指针(1)
  • Docker应用部署之mysql篇(day5)
  • 用Python掌握算法:初学者指南
  • springboot+mybatisplus
  • MySQL安装与卸载