When resizing image it doesn't keep ratio?

Question

When I upload a image on my websie it resizes to max 100 by max 100. The only problem is that is doesn't keep its ratio... for example : Original image is 200 by 400, after resize its 100 by 100 even though it should by 50 by 100.

SCRIPT :

<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>

CALL :

            <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

When you re-size an image, you have to give it a breathing space by making either the property value of the height or the width Auto

HTML

<div id="image-container">
<!-- Image Goes here -->
</div><!-- End Image Container -->

CSS

#image-container {
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    overflow: hidden; /* Cuts off whatever goes beyond the given dimension */
}


 #image-container img {
        width: 100px;
        height: auto; /* Gives the image the breathing space as it adjusts */
    }

Answer 2

Specify the width, and set the height to auto. That will preserve the aspect ratio.

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