现在是把高度写死 宽度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