人像电影海报纵横比大小

问题描述

我很难确定人像电影海报的长宽比。

对于风景而言,几乎每个电影网站都使用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;