使用最简单的 CSS 代码来实现网页电影比例

哈德森

发布于 2023-04-07 16:21:41

3220

发布于 2023-04-07 16:21:41

文章被收录于专栏：哈德森的梦哈德森的梦

在摄影中，2.35 比 1 这个比例，可以给人一种电影的感觉。

包括微信公众号的封面，也是这个比例：

在网页设计的时候，我也想用这个比例来实现图片比例的裁切。

我百度了一下，发现有很多方法来呈现这个效果，我找到了最简单的一种。（当然像 ie 浏览器是肯定不支持的，具体可以查看 MDN 文档。）

使用aspect-ratio这个属性就可以，属性值是宽 / 高。

例如我有这样一张图片：

我要给图片的img标签设置比例为：2.35：1的比例，我可以这样写：

aspect-ratio: 2.35 / 1;

以此类推，如需设置 16：9，我们写作：

aspect-ratio: 16 / 9;

css 完整代码如下：

img {
        max-width: 100%;
        aspect-ratio: 2.35 / 1;
        object-fit: cover;
        box-sizing: border-box;
        overflow: hidden;
}

完整的 html 示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2.35：1</title>
    <style>
      body {
      }
      img {
        max-width: 100%;
        background-color: pink;
        aspect-ratio: 2.35 / 1;
        object-fit: cover;
        box-sizing: border-box;
        overflow: hidden;
      }
</style>
  </head>
  <body>
    <h1>电影比例测试</h1>
    <img src="./demo.jpg"  />
  </body>
</html>

效果图如下：