使用<a-image>标签时，有没有办法保留图像比例？

Question

使用标签时，有没有办法保留图像比例？

的文档提到硬编码的尺寸但请求任意图像

https://aframe.io/docs/0.6.0/primitives/a-image.html

Answer 1

时的问题，因为据我看到的，a-image只是一个a-plane与材料的图像源。

这意味着图像将在平面streched，你只能用

• <a-image>高度和宽度，这是一个平面的高度和宽度米，乱七八糟
• <img>高度和宽度，它指定了像素的图像尺寸，但图像仍然会在平面上延伸。

你可以尝试自动去做，一个组件内，设置a-plane宽度和高度取决于输入<img>宽度和高度，具有PX-米率：

AFRAME.registerComponent('imageSetter',{ 
    schema:{ 
    img:{type:'selector'} 
    }, 
    init:function(){ 
     let lowResRatio = 0.01; 
     this.el.setAttribute('height',this.data.img.height*lowResRatio); 
     this.el.setAttribute('width',this.data.img.width*lowResRatio); 
    } 
}); 

检查出来在我的小提琴中：https://jsfiddle.net/gftruj/5d9j9nqm/2/。

否则，您需要先准备好图像。

UPDATE

可以修改部件因此它的图像尺寸，得到一个高/宽比，并且将宽度和高度相应地：

AFRAME.registerComponent('foo',{ 
    schema:{ 
    img:{type:'selector',default:''}, 
    height:{} 
    }, 
    init:function(){ 
    let data = this.data; 
    let ratio = 1/100; 
    this.el.setAttribute('width',data.img.width*ratio); 
    this.el.setAttribute('height',data.height); 
    this.el.addEventListener('materialtextureloaded', (e)=>{ 
    var w = e.detail.texture.image.videoWidth || e.detail.texture.image.width; 
    var h = e.detail.texture.image.videoHeight || e.detail.texture.image.height; 
    let ratio = w/h; 
    this.el.setAttribute('width',data.height*ratio); 
    }); 
    } 
}) 

活拨弄这里：https://jsfiddle.net/5d9j9nqm/4/
现在它将自己固定到给定的高度。