php - 调整图像大小时它不保持比例？

Question

当我在我的网站上上传图片时，它会调整到最大 100 x 最大 100。唯一的问题是它没有保持它的比例...例如:原始图像是 200 x 400，在调整它的 100 x 之后100，尽管它应该是 50 x 100。

脚本:

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

            reader.onload = function (e) {
                $('#imgprev')
                    .attr('src', e.target.result)
                    .width(100)
                    .height(100);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

调用:

            <div class="simplr-field ">
                <label class="left" for="small_image">
                    <strong>Huidige kleine afbeelding: </strong><br> (Hieronder vindt u de huidige kleine afbeelding.)
                    <br>
                    <img id="imgprev" src="<?=$post['small_image_url'];?>" alt="Afbeelding preview" style="width: 100px;">
            </div>
                <div class="simplr-field ">
                    <label class="left" for="small_image">
                        <strong>Wijzigen kleine afbeelding: </strong><br> (de gekozen afbeelding wordt automatisch geschaald naar een maximaal formaat van 100*100 pixels.
                        De bestaandsgrootte is 200kB maximaal. Alleen JPG, JPEG en PNG toegestaan.)
                    <br>
                        <input type="file" name="file" id="file" onchange="readURL(this)">
                </div>

Answer 1

指定宽度，并将高度设置为自动。这将保持纵横比。

reader.onload = function (e) {
                $('#imgprev')
                    .attr('src', e.target.result)
                    .css({
                      width: '100px',
                      height: 'auto'
                    });
            };