图片等比例缩放算法（计算缩放后的宽高）

让图片能够自适应父容器的宽高，并且保证图片不变形不溢出，那么就需要对图片进行等比例缩放，拿到缩放后的宽高重新赋值即可，具体算法如下：

// 分别传入图片宽高、父容器宽高
const transformImgRatio = (imgWidth, imgHeight, containerWidth, containerHeight) => {let [// 用于设定图片的宽和高tempWidth,tempHeight,] = [0,0]try {imgWidth = parseFloat(imgWidth)imgHeight = parseFloat(imgHeight)containerWidth = parseFloat(containerWidth)containerHeight = parseFloat(containerHeight)} catch (error) {throw new Error('抱歉，我只接收数值类型或者可以转成数值类型的参数')}if (imgWidth > 0 && imgHeight > 0) {//原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度if (imgWidth / imgHeight >= containerWidth / containerHeight) {if (imgWidth > containerWidth) {tempWidth = containerWidth// 按原图片的比例进行缩放tempHeight = (imgHeight * containerWidth) / imgWidth} else {// 按照图片的大小进行缩放tempWidth = imgWidthtempHeight = imgHeight}} else {  // 原图片的高度必然 > 宽度if (imgHeight > containerHeight) {tempHeight = containerHeight// 按原图片的比例进行缩放tempWidth = (imgWidth * containerHeight) / imgHeight} else {// 按原图片的大小进行缩放tempWidth = imgWidthtempHeight = imgHeight}}}return { width: tempWidth, height: tempHeight }
}

图片等比例缩放算法（计算缩放后的宽高）相关推荐

vue图片在设置好的div里面自动适应宽高，显示全部图片，不够的留空白
vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 <div class="rightullidiv"><img:src="it ...
等比缩放公式_图片等比例缩小算法
图片等比例缩放算法在许多语言中,都希望图片可以等比例缩小或者放大,但是仅仅依靠语言本身的方法, 大多差强人意, 所以在此提供一个所有语言通用的图片等比例缩小方法的算法. 这里以 java 语言为例子 ...
文本框固定任意一顶点后，拖动相对点任意旋转缩放，计算缩放后顶点坐标
问题描述鼠标拖动缩放文本框的时候,需要重新计算缩放后文本框四个顶点的坐标,然后重新绘制新文本框在Office上,缩放文本框的操作一般是鼠标拖动八个控制点其中一个,然后固定住与其相对的控制点的位置, ...
计算html的高度,html计算各对象的宽高
Window对象属性ScreenLeft/ScreenTop/ScreenX/ScreenY只读整数,声明了窗口的左上角在屏幕上的 x 坐标和 y 坐标. /** * 获取屏幕的宽度 * @para ...
图片适应窗口_HTMLCSS学习笔记（八）-- 宽高自适应
宽高自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以 ...
php排字符串的高低位怎么区分,PHP-根据字符串和所用字体计算字符串所占宽高...
今天由于用GD画图, 需要把一段文字在一个框内居中, 但是文字的宽度如果用strlen($str) * $font_size来计算的话, 由于文字不是等宽高的, 所以会导致偏离, 最后选用的GD库的i ...
图像缩放算法_opencv缩放算法
1.opencv插值介绍 opencv提供resize函数用来做图像缩放,该函数有6个参数: (1)输入图像,Mat型 (2)输出图像,Mat型 (3)输出图像大小,可用cv::Size(out_im ...
计算机视觉-图像缩放算法-cuda实现
一.CUDA CUDA是显卡厂商NVIDIA(英伟达)推出的运算平台,能够将数据数据复制到GPU,在GPU中进行计算,然后再返回给CPU端.CUDA将GPU称为设备侧或者Device,将CPU称为Ho ...

图片等比例缩放算法（计算缩放后的宽高）

图片等比例缩放算法（计算缩放后的宽高）相关推荐

最新文章

热门文章