Question

当用户点击按钮时，画布中的图像将显示在img元素中。我已经检查过图像的宽度是否超过，如果是，则在显示之前调整它的大小。但是，这不起作用。当我调试它时，我意识到宽度的检查是基于我的旧宽度而不是新的宽度。

<input type="button" value="Load" onclick="loadImage();" />
<img id="aImg" name="aImg" src="${param.src}"></img>

在Javascript中......

function loadImage() {
    var dataURL = "http://xxx.jpg";
    var dis = document.getElementById("aImg");
    dis.crossOrigin = "anonymous";
    dis.src = dataURL;

    if(dis.width > 800){
      dis.width = 800;
    }
}

我的图像显然超过800，但它仍以实际宽度显示。当我调试时，dis.width实际检查我的旧宽度。有什么办法解决这个问题吗？感谢。

Answer 1

那是因为它是dis.style.width，而不是dis.width

修改

抱歉，看起来我误解了你的问题。我想我会以不同的方式处理这个问题，我会让CSS为我处理图像的大小。看看：http://jsfiddle.net/ysGVP/2/

尝试调整max-width css中的.img-wrap值。

当设置为100px时，它缩小图片以适合换行，当设置为... 900px时，图像以正常宽度显示。所以基本上，max-width可以用作“如果图像超过X尺寸，缩小它”

这是你想要完成的吗？

在显示之前设置图像的大小

1 个答案: