js怎么控制手机端图片显示16:9

Question

现在是把高度写死 宽度100% 业务说要按照16:9来显示图片 16:9要怎么计算的？

Answer 1

有一种直接利用css，可以不用js直接计算的办法。

代码：

/*html*/

<div class="img">
    <img src="http://7xphz3.com1.z0.glb.clouddn.com/0.jpg">
</div>

/*css*/
    .img
    {
        margin: 0 auto;
        width: 64%;
        height: 0px;
        padding-bottom: 27%;
        overflow: hidden;
    }
    
        .img img
    {
        width: 100%;
    }

效果：

不管窗口多大，图片多大，比例都是16:9。

原理：
css中，padding-top和padding-bottom都是按照其最近块级父元素的宽度百分比计算，所以例子中的div，只用保证宽度和padding-bottom所占父元素宽度百分比的比例是19:6即可。设置overflow:hidden将图像多余的部分裁掉。这种方法适应性也很好。

Answer 2

利用js获取图片的实际高度$('img').height()，当然你也可以直接用你写死的高度值,然后用这个高度值乘以16再除以9，就是图片宽高比是16：9的宽度。

反过来求高度就是先乘以9，再除以16