При изменении размера изображения он не поддерживает соотношение?

Question

Когда я загружаю изображение на своем веб-сайте, он изменяет размер до 100 на 100. Единственная проблема заключается в том, что он не поддерживает его соотношение ... например: оригинальное изображение составляет 200 на 400, после изменения размера 100 на 100 даже если он должен на 50 на 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

Укажите ширину и высоту установите на авто. Это сохранит соотношение сторон.

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

Answer 2

Когда вы повторно размер изображение, вы должны дать ему передышку, сделав либо значение свойства he IGHT или ширина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 */ 
    }