首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用JavaScript计算文字宽度?

如何使用JavaScript计算文字宽度?

提问于 2017-12-25 07:36:51
回答 2关注 0查看 1.4K

我想使用JavaScript来计算字符串的宽度。这可能吗?而不必使用等宽字体?

如果它不是内置的,我唯一的想法是为每个字符创建一个宽度表,但是这是非常不合理的,特别是支持Unicode和不同类型的大小(以及所有的浏览器)。

回答 2

Crash

发布于 2018-03-23 05:54:31

看看这段代码

代码语言:txt
AI代码解释
复制
$(document).ready(function() {
    $('.story-small img').each(function() {
        var maxWidth = 100; // Max width for the image
        var maxHeight = 100;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height

        // Check if the current width is larger than the max
        if(width > maxWidth){
            ratio = maxWidth / width;   // get ratio for scaling image
            $(this).css("width", maxWidth); // Set new width
            $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }

        // Check if current height is larger than max
        if(height > maxHeight){
            ratio = maxHeight / height; // get ratio for scaling image
            $(this).css("height", maxHeight);   // Set new height
            $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
    });
});

圣安德烈

发布于 2018-03-23 06:59:37

一个非常规的做法:

代码语言:txt
AI代码解释
复制
 /**
  * Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
和开发者交流更多问题细节吧,去 写回答
相关文章
Visio如何调整锁定图像大小
在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况。
码农阿宇
2018/04/18
4.6K0
Visio如何调整锁定图像大小
图像分类每个标签按比例划分数据
在做图像分类时候,会收集一批相应的数据,这里将其称为总数据集total-data,
用户3578099
2020/11/30
1.5K0
图像分类每个标签按比例划分数据
在 Linux 终端调整图像的大小
ImageMagick 是一个方便的多用途命令行工具,它能满足你所有的图像需求。ImageMagick 支持各种图像类型,包括 JPG 照片和 PNG 图形。
用户4988085
2021/09/14
4.5K0
word中图片批量调整统一长宽比例大小
word中有格式刷功能,标题样式,文字大小和样式,图片样式(如阴影效果),这些都可以直接格式刷,但是图片长宽比例大小无法格式刷,这里提供一个快速的解决方式,批量统一调整长宽比例和大小。
六月河
2023/06/26
8160
word中图片批量调整统一长宽比例大小
css中如何做到容器按比例缩放
图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上,但是如果是视频呢?
用户1097444
2023/07/14
7580
css中如何做到容器按比例缩放
如何对N个接口按比例压测
随着微服务盛行,公司的服务端项目也越来越多。单一的接口性能测试并不能准确反映某个服务的总体处理能力,在服务功能划分比较清晰的架构下,对于某一服务的总体性能测试也相对变得简单。下面分享一个对于某个模块对应的服务的N个接口按照固定比例(来源于线上监控)进行性能测试,基于自己写的性能测试框架第二版。
FunTester
2020/01/17
5510
css中如何做到容器按比例缩放
图片因为本身存在宽高比,所以设置一个值,另一个值自动也就根据真实的比例对应上,但是如果是视频呢?
IMWeb前端团队
2019/12/03
1.7K0
css中如何做到容器按比例缩放
宝, 来学习一下CSS中的宽高比,让 h5 开发更想你的夜!
在图像和其他响应式元素的宽度和高度之间有一个一致的比例是很重要的。在CSS中,我们使用padding hack已经很多年了,但现在我们在CSS中有了原生的长宽比支持。
前端小智@大迁世界
2022/06/15
1.8K0
宝, 来学习一下CSS中的宽高比,让 h5 开发更想你的夜!
分层抽样不按比例如何加权_按比例分层抽样和定额抽样的区别?
从宏观上,两者的目的都是为了提供更好的样本代表性,并且两者的理论基础都来自于:总体的个体的同质性越高,抽样误差越小,样本的代表性越好。
全栈程序员站长
2022/08/28
1.4K0
css中如何做到容器按比例缩放
本文介绍了在CSS中如何实现容器的按比例缩放,通过使用padding-bottom百分比实现。同时,该文还介绍了一种实现视频等比缩放的方案,使用绝对定位和容器相对定位结合的方法。
IMWeb前端团队
2018/01/08
1.9K0
css中如何做到容器按比例缩放
JAVA按比例压缩图片
有时候项目中会遇到前端上传图片,后台需要前端返回原图和按原图比例缩小的压缩图片,此时就需要JAVA来进行图片压缩了,赶紧上代码:
一诺千金
2020/04/30
2K0
调整图像大小的三种插值算法总结
这种类型的插值是最基本的。我们简单地将最近的像素插值到当前像素。假设,我们从0开始索引像素的值。下面2x2图像的像素如下:{' 10 ':(0,0),' 20 ':(1,0),' 30 ':(0,1),' 40 ':(1,1)}
deephub
2021/07/01
2.9K0
Mockplus:如何调整图标的大小和方向?
使用属性面板上的大小设置,可以很方便地调节图标大小。 调整方向还是通过属性面板来完成: 另外:有些图标调整了大小之后可以用做特别的用途哟,比如 Smile 图标调大后非常适合做圆形头像。
奔跑的小鹿
2018/03/15
1.8K0
Mockplus:如何调整图标的大小和方向?
Linux调整Swap大小
关闭swap swapoff -a 1.创建交换分区的文件:增加2G大小的交换分区 dd if=/dev/zero of=/var/swapfile bs=1M count=2048 2.设置交换文件 mkswap /var/swapfile 3.启用交换分区文件 swapon /var/swapfile 4.在/etc/fstab添加 echo '/var/swapfile swap swap defaults 0 0'>>/etc/fstab 5.检查 free -m
苦咖啡
2018/04/28
8.7K0
Excel小技巧63:调整工作表中所有图表的大小并保持相同
在创建图表时,Excel会使用默认的大小。有时候,我们想将工作表中所有图表的大小进行调整,使其更小些或者更大些。可以通过逐个图表手动拖拉进行调整,然而,这样调整出来的图表大小总会稍有差异。要想使图表的大小保持一致,有多种方法,除了VBA外,下面介绍两种快捷的方法。
fanjy
2020/11/06
6.5K0
图像明暗调整
算法:图像明暗调整是检测画面亮度和调节画面亮度与对比度。数字图像 f(x,y) = i(x,y) r(x,y) ,如果灰度值在[0,255]之间,则f值越接近0,亮度越低,f值越接近255,亮度越高。
裴来凡
2022/05/29
3630
图像明暗调整
调整JVM内存大小
JAVA程序启动时JVM都会分配一个初始内存和最大内存给这个应用程序。这个初始内存和最大内存在一定程度都会影响程序的性能;Tomcat默认可以使用的内存为128MB,在较大型的应用项目中,这点内存是不够的,需要调大。有以下几种方法可以选用:
MonroeCode
2018/01/12
3.2K0
ECharts散点图大小调整
在业务需求中,有时候会遇到ECharts散点图,现在记录一下,今天解决了一个小问题,ECharts散点图大小调整。
王小婷
2019/05/07
5.1K0
ECharts散点图大小调整
小程序checkbox调整大小
.cb{ transform: scale(0.6,0.6); } <view> <label class="lab" for="box1"> <checkbox value="v1" checked class="cb"/>复选框 </label> </view>
苦咖啡
2018/04/28
4.1K0
点击加载更多

相似问题

使用CSS按比例调整图像大小?

2299

如何调整版本库大小?

1293

QWidget如何调整标志的大小?

2276

如何调整VirtualBox vmdk文件的大小?

22.4K

swiper 里的图片大小如何设置 呢? 为什么 给了高度以后就不按比例来显示呢?

31.5K
相关问答用户
腾讯云TDP | TDP会员擅长3个领域
到家集团 | 技术VP擅长5个领域
腾讯云TDP | KOL擅长5个领域
擅长3个领域
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文