使用 jQuery 保持图像高度的比例答案

【问题标题】：Keeping image ratio for its height using jQuery使用 jQuery 保持图像高度的比例
【发布时间】：2019-01-20 13:09:35
【问题描述】：

嘿，我正在尝试自动获取图像的高度。我似乎找不到任何 jQuery 来执行此操作？

我想要做的就像它在 Photoshop 中所做的那样：

如果图像是：

Width  = 778
Height = 346

我想将 width 更改为 380 然后在 photoshop 的 Width 文本框中输入 380 更改 高度到 169：

width  = 380
height = 169

我如何在 Jquery 中模仿这个？

【问题讨论】：

标签： javascript jquery image math aspect-ratio

【解决方案1】：

这样的事情怎么样

http://jsfiddle.net/Njf5k/1/

HTML

<label>Original Width</label>
<input type="text" id="originalWidth" class="original" value="778" />
<br />
<label>Original Height</label>
<input type="text" id="originalHeight" class="original" value="346" />
<label>New Width</label>
<input type="text" id="newWidth" class="new" />
<br />
<label>New Height</label>
<input type="text" id="newHeight" class="new" />

jQuery

它基于宽度/高度保持不变的事实。

$('#newWidth').keyup(function () {
    $('#newHeight').val(Math.round(
    ($('#originalHeight').val() * $('#newWidth').val()) / $('#originalWidth').val()));
});

【讨论】：

【解决方案2】：

为什么需要这个？如果你只是在 html img 元素中设置了一个像 height/width 这样的属性，你会自动看到图像的比例。

【讨论】：