How to fit the preview of uploaded image in a div?

Question

Need to fit an image inside div without making image as background image of the div

My code as follows

<div style="display:none" id="previewImage" height="300px" width="300px">
    <img src="" id="previewImg" height="400px" width="450px">
</div>
<div>
    <input type='file' class="inputfile" name='file' id='file' size='50' accept='image/*' />
    <input type='submit' value='Upload' name='Upload image'/>
</div>

Also check http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container — mc20, Jan 20 '17 at 05:24

Himesh Suthar · Accepted Answer · 2017-01-20T06:10:02.947

3

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

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

    reader.readAsDataURL(input.files[0]);
  }
}
$("#imgpath").change(function() {
  readURL(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="imgpath" name="file" accept="image/*">

<div class=" ffset-2" >
  <img id="passport_photo" src="#" alt="image" style="width:150px;height:auto;">
</div>

edited Jan 20 '17 at 06:10

answered Jan 20 '17 at 05:27

Himesh Suthar

562
4
14

What is `ng-show` doing there without inclusion of Angular? :D – tanmay Jan 20 '17 at 05:36
@tanmay ha ha yeah.. forget to remove that from my snippet – Himesh Suthar Jan 20 '17 at 06:10

score 0 · Answer 2 · answered Jan 20 '17 at 05:30

0

Basically :

width:100%;
height:auto;

https://jsfiddle.net/3scdng5h/

answered Jan 20 '17 at 05:30

dc-p8

784
1
6
19

How to fit the preview of uploaded image in a div?

2 Answers2