javascript - 容器中的拉伸(stretch)图像

Question

每当我将文件上传到此容器时，它都会拉伸(stretch)图像....我如何才能使它仅使图像居中但不会拉伸(stretch)它，而且容器保持相同大小？

<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])">

Answer 1

您可以使用 CSS background-position 和 background-cover 属性来实现这一点

FIDDLE

你的 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])+')')">  

和 CSS

#blah2 {
  width:196px; 
  height:296px;
  background-image: url('path/to/image');
  background-position: center;
  background-size: cover;
}