图像比例答案

【问题标题】：Image Proportions图像比例
【发布时间】：2016-10-20 20:05:28
【问题描述】：

我遇到了一个我无法弄清楚的问题。我设计了一个个人资料图片功能，我需要找到一种方法来使所有照片成比例，以便它们都有，比如说max-height: 50px' and 'max-width: 50px;。问题是，我不想随便剪掉照片的一部分。例如，如果一张照片是 3（宽）x 6（高），我正在寻找一种解决方案，将这张照片的中心带到我正在寻找的比例。类似到 Facebook 的头像上传。

我不一定需要它的预览格式，但它会很好。我已经有预览功能了：

<form action="" method="POST" enctype="multipart/form-data">
    Change your profile picture <br>
    <input type="file" name="file" class="file-input">
    <img width="300px" height="200px" class="none" id="file" src="#" alt="your image">
    <input type="submit" class="none" name="create" value="Upload Profile Picture">
</form>


function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#file').attr('src', e.target.result);
        }

            reader.readAsDataURL(input.files[0]);
    }
}

有人知道我该怎么做吗？

【问题讨论】：

我不确定这是一种会让你走得很远的问题。你是否被困在一个特定的点上，是不是有些东西不能正常工作？ “我怎么能这样做”对于我来说有点过于宽泛了。
无论如何，这不能用 CSS/HTML 处理，你需要使用一些可以做数学的库
@GeorgeKatsanos 无意冒犯，但我只有你的一半，我也不关心这里的“走远”。我正在寻求帮助。不是代码，这里可以给出具体的答案。如果有人以前这样做过，他们可以提供函数名称、资源等。不需要您的评论。
@Becky 我不是 100% 确定这是否是您所追求的，但如果是的话，我可以将此评论扩展为答案：jsfiddle.net/m4r0vfpw 我刚刚整理了一下，希望这是您的'在之后。
@Becky 无论如何，你的标签是错误的。这个和html/css无关，需要计算图片的中心，大概需要imagemagick.org/script/index.php

标签： jquery html image css

【解决方案1】：

您似乎无法“拖动以重新定位”您的照片。为此，请确保您具有以下属性：可拖动 = “真” 在至少一个输入标签中。将 Javascript 实现到拖动动作（例如调整图像在某些区域的不透明度）的一种简单方法是添加属性： ondragstart="" 并将您想要的任何 Javascript 放在引号中。如果您愿意，您甚至可以在图像前面放置一个 HTML5 表格，这样您就可以更轻松地更改不同区域的不透明度。

【讨论】：

这有帮助吗？