Javascript 容器中的拉伸图像

每当我上传一个文件到这个容器中，它就会拉伸图像。。。。我如何得到它，使它只是中心的形象，但不会拉伸它，但容器保持相同的大小

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="blah2" alt="Your Pixboard Image Here" width="196" height="296" />

<input type="file" 
    onchange="$('#blah2')[0].src = window.URL.createObjectURL(this.files[0])">

---

不要设置图像的高度

选中此项，为图像定义和，而不是宽度和高度。
这样，您的图像将被缩小以保留在方框中。
您可以使用CSS
背景位置和
背景封面
属性来实现这一点


你的HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="blah2">Your pixelboard image here</div>

<input type="file" 
    onchange="$('#blah2').css('background-image', 'url('+window.URL.createObjectURL(this.files[0])+')')">  

您定义的高度和宽度会拉伸任何不是196 x 296的物体，如果您只定义一个（即仅高度），会发生什么情况？他需要他的图像留在容器中。使用此解决方案，如果您得到一个“高而细”的图像，将破坏布局。
#blah2 {
  width:196px; 
  height:296px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
}