Question

每当我将一个文件上传到这个容器中时，它会拉伸图像....我如何得到它所以它只是居中图像但不会拉伸它而且容器保持相同的大小？

<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

为您的图片定义max-width和max-height，而不是宽度和高度。这样你的图像就会缩小到你的盒子里。

Answer 2

您可以使用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;
}

Answer 3

不要设置图像的高度

<img id="blah2" alt="Your Pixboard Image Here" width="196" /＆GT; 请检查此link

容器中的拉伸图像

3 个答案: