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

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

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

最佳答案

这应该做...

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

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

newimg

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