Question

max-标记上的min-width和<img>属性非常有用，尤其是最大宽度可以防止img拉伸大于其原始大小。

现在，当您使用特定图像时，这很容易，因此您可以将其设置为与图像的大小相同。但是如果你想将它应用于一般图像，例如用户上传的图像呢？（所以你不知道尺寸是多少）换句话说，对于任意图像，将最大/最小宽度设置为图像的精确尺寸。

Answer 1

这应该这样做......

<html>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
</script>
...
<div id="img-container"></div>
...
</html>
<script>
function loadImage(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      $(newImg).css({
        'max-width':width,
        'max-height':height
      });
      $("#img-container").append(newImg);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

loadImage('youimage.jpg');

</script>

您也可以使用服务器端代码来获取图像大小。

Answer 2

试试这个

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
var file, img;
if ((file = this.files[0])) {
    img = new Image();
    img.onload = function() {
        alert(this.width + " " + this.height);
    };
    img.onerror = function() {
        alert( "not a valid file: " + file.type);
    };
    img.src = _URL.createObjectURL(file);

}

});

工作演示：

http://jsfiddle.net/4N6D9/1/

任意大小的img的静态最大/最小宽度

2 个答案: