如何在div中拟合上传图像的预览？

Question

需要在div内部放置图像而不将图像作为div的背景图像

我的代码如下

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

Answer 1

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>

Answer 2

基本上：

width:100%;
height:auto;

https://jsfiddle.net/3scdng5h/