问题描述
我很难确定人像电影海报的长宽比。
对于风景而言,几乎每个电影网站都使用16/9很简单。
因此对于200像素宽的电影海报,高度将为
200/16*9 = 112.5
我在某处读到,您只是颠倒了风景。例如200px宽的电影海报的高度应为
200/9*16 = 355
这看起来不正确,海报看起来太高了,如果您看的是Google肖像电影海报,则不会以16/9反转。
https://i.ytimg.com/vi_webp/w7lXl6raeh4/movieposter.webp
我需要能够生成纵向的长宽比,而不是对图像大小进行硬编码,因为我需要它们在不同的浏览宽度上是动态的。
这是一个例子吗? https://output.jsbin.com/nexahagose/
任何建议都会有所帮助。
解决方法
肖像会
width: 200px;
height: calc(200px * (16/9));
风景
width: 200px;
height: calc(200px / (16/9));
我认为您链接的图像没有这样的长宽比。
,如果您希望所有海报的比例为16:9:
height: 200px;
width: calc(200px * (9/16));
object-fit: cover; // this will maintain the correct ratio instead of scaling the image
您还可以使用javascript检查海报的大小(和比例),并在以后进行处理:
let img = document.getElementById('poster'); // or whatever you name it
let width = img.clientWidth;
let height = img.clientHeight;
let ratio = height / width;