用jquery等比例控制图片宽高的具体实现

要使用jQuery等比例控制图片宽高，你可以通过获取图片的原始宽高比，然后基于这个比例来设置图片的宽度或高度，同时保持其宽高比不变。这里提供一个基本的实现思路，你可以根据自己的具体需求进行调整。

首先，你需要通过jQuery获取图片的原始宽度和高度，这可以通过图片的`naturalWidth`和`naturalHeight`属性来实现（注意，这些属性并不是通过jQuery直接获取的，而是通过原生的DOM元素）。然后，你可以根据容器的尺寸或者其他条件来计算新的宽度或高度，同时确保图片的宽高比保持不变。

以下是一个简单的示例，展示了如何根据容器的宽度等比例调整图片的大小：

$(document).ready(function() {
    // 假设图片在id为'myImage'的img标签中
    var $img = $('#myImage');

    // 获取图片的原始宽高
    var originalWidth = $img[0].naturalWidth;
    var originalHeight = $img[0].naturalHeight;

    // 假设你想让图片的宽度适应容器的宽度（例如容器宽度为300px）
    var containerWidth = 300; // 这里应该是你的容器宽度

    // 计算新的高度，保持宽高比不变
    var newHeight = (containerWidth / originalWidth) * originalHeight;

    // 设置图片的宽度和高度
    $img.css({
        'width': containerWidth + 'px',
        'height': newHeight + 'px',
        // 如果你不希望图片被裁剪，可以添加以下属性（视情况而定）
        'object-fit': 'cover' // 或者使用 'contain' 根据需要
    });

    // 注意：'object-fit' 是CSS属性，用于控制图片如何适应其容器框，而不是jQuery的属性
    // 'cover' 会保持图片的宽高比，但可能会裁剪图片以完全覆盖容器
    // 'contain' 会保持图片的宽高比，但图片可能会被完全包含在容器内，两边可能会有空白
});

请注意，`object-fit` 是CSS的一个属性，不是jQuery的属性。在上面的代码中，我将其作为一个示例来展示如何进一步控制图片的显示方式。你可以根据自己的需要选择是否使用它，以及使用哪个值（`cover`、`contain` 等）。

另外，上面的代码假设你已经有一个具体的容器宽度值（在示例中为300px）。在实际应用中，你可能需要根据容器的实际宽度来动态计算这个值。这通常可以通过CSS或JavaScript来实现，具体取决于你的页面布局和需求。