CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nick
Nick

Reputation: 51

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

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>

Upvotes: 1

Views: 2254

Answers (2)

Himesh Suthar
Himesh Suthar

Reputation: 572

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>

Upvotes: 3

dc-p8
dc-p8

Reputation: 864

Basically :

width:100%;
height:auto;

https://jsfiddle.net/3scdng5h/

Upvotes: 0

Related Questions