手机web端html5保存图片不显示,【Web前端问题】js怎么控制手机端图片显示16:9

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

回答：

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

代码：

/*html*/

/*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将图像多余的部分裁掉。这种方法适应性也很好。

回答：

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

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