人像电影海报宽高比

Question

我真的很难计算出肖像电影海报的纵横比。

对于景观，它很简单，几乎每个电影网站都使用16/9。

所以对于一个200px宽的电影海报来说，高度应该是。

200/16*9 = 112.5

我在某处读到你只是颠倒了景观方面。例如，一张200px宽的电影海报的高度应该是。

200/9*16 = 355 

这看起来不对，海报看起来太高了，如果你看一张谷歌肖像电影海报，它不是16/9颠倒的。

https://i.ytimg.com/vi_webp/w7lXl6raeh4/movieposter.webp

我需要能够生成肖像的纵横比，而不是硬编码的图像大小，因为我需要他们是动态的不同的浏览宽度。

这里有一个例子-- https://output.jsbin.com/nexahagose/

任何建议都将是有益的，谢谢。

Answer 1

肖像将会是

width: 200px;
height: calc(200px * (16/9));

景观

width: 200px;
height: calc(200px / (16/9));

我不认为你链接的图像有这个纵横比。

Answer 2

如果你想让所有的海报都有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;