我遇到了其他人以前在此网站上遇到过的问题，但是没有一个解决方案对我有一点帮助。
我有一种更新div内图像的方法（阅读：用户上传新图像），在该图像中调整图像的大小以适合设置的比例（最大高度和最大宽度为45x45）。我必须将可容纳图像的div调整为2 *尺寸，例如下面的示例：
原始图片为180x180。
尺寸调整为45x45。Div必须为90x90。
代码如下：
function uploadThumbnail(id, xCoord, yCoord) {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("thumbnailLoader"+id).files[0]);
oFReader.onload = function(oFREvent) {
var mapThumbnail = updateMapThumbnail(oFREvent.target.result, id);
var mapContainer = document.getElementById("thumbnail"+id);
var informationContainer = document.getElementById("container"+id);
console.log(mapThumbnail.width);
mapContainer.removeChild(document.getElementById("mapThumbnail"+id));
informationContainer.removeChild(document.getElementById("infoThumbnail"+id));
informationContainer.insertBefore(updateInfoThumbnail(oFREvent.target.result, id), informationContainer.firstChild);
mapContainer.appendChild(mapThumbnail);
};
};
function updateMapThumbnail(result, id){
var newThumbnail = document.createElement("img");
newThumbnail.src = result;
newThumbnail.style.maxWidth = "45px";
newThumbnail.style.maxHeight = "45px";
newThumbnail.id = "mapThumbnail" + id;
return newThumbnail;
}
如您所见，我在此处添加了console.log方法以进行测试。我面临的问题是，mapThumbnail使用设置的最大尺寸（45x45）生成的高度和宽度属性仍设置为原始图像尺寸。我尝试读取image.height / width和image.style.height / width以及naturalHeight / width和clientHeight / width。
在调整大小之后，这些解决方案都不返回高度和宽度。
谢谢你的时间。
另外，请不要提供需要JavaScript库的解决方案。
编辑：忘记提及放置在div内的图像已重新调整为我想要的尺寸。只是似乎错误的属性。
图像上有四种不同且无关的宽度：
1）img.naturalWidth是原始图像文件的宽度（以px为单位）。将其他宽度设置为某个值时，它不会改变。当未定义其他值时，将呈现此值。
2）img.width是img的属性。您可以在html img标签中找到它，并可以使用进行设置img.setAttribute('width', 'value')。当其他设置为某个值时，它不会改变。当3）未定义且4）> = img.width或未定义时，将呈现此值。
3）img.style.width是图像样式的CSS属性。您可以使用在css或img标签的style-attribute中进行设置img.style.width = 'value';。当其他设置为某个值时，它不会改变。如果未定义<= 4）或4），则呈现此值。
4）img.style.max-width是图像样式的另一种CSS属性。您可以使用在css或img标签的style-attribute中进行设置img.style.maxWidth = 'value';。当其他设置为某个值时，它不会改变。当未定义2）或3）或值> 4）时，将呈现此图像。
因此，您必须自己决定要接收或设置哪个值。
与高度相同，也有四个高度。
编辑根据您的评论：在您的函数内部，您updateMapThumbnail将创建一个新的img。除非您使用定义新创建的img，否则它没有.width newThumbnail.setAttribute('width', 'value)。与img.style.width：相同：除非您明确地将其设置在不存在的地方。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句