保持纵横比 Mixin | CSS-Tricks

这篇文章来自 2013 年 7 月，介绍了一种使用伪元素来保持元素纵横比的方法，即使它在缩放时也是如此。

这是一个简化了数学运算的 Sass Mixin。

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

Mixin 假设你将使用类名为 content 的元素嵌套在你最初的块中。像这样

<div class="sixteen-nine">
  <div class="content">
    insert content here
    this will maintain a 16:9 aspect ratio
  </div>
</div>

使用 Mixin 很简单，就像

.sixteen-nine {
  @include aspect-ratio(16, 9);
}

结果

.sixteen-nine {
  position: relative;
}
.sixteen-nine:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.sixteen-nine > .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

演示

这是一个演示，展示了上述代码的实际操作。添加动画是为了展示元素在调整大小时的纵横比保持不变。

查看 Pen 保持纵横比演示作者：Sean Dempsey (@seanseansean) on CodePen.

感谢 Sean Dempsey (@thatseandempsey) 为此做出贡献！

zzzzBov

# 2015 年 2 月 10 日

通过使用数据属性和泛化子选择器，可以将此技术简化为更通用的方法.

Matt

# 2015 年 2 月 12 日

这是一个不错的技巧。唯一的问题是，如果框的内容由于某种原因扩展，高度不会调整。因此，如果框中填充的单词比适合的单词多，或者用户增加了文字大小，文字可能会溢出框。如果能兼顾两者就好了：尽可能保持纵横比，但需要时也进行扩展。

Jakob E

# 2015 年 2 月 18 日

嗨，Matt，

你可以像这样制作一个“保持纵横比或适合内容”的版本
…并删除包装器 :-)

pen: http://codepen.io/jakob-e/pen/LEdWNB

HTML
<div>
  <p>Maintain aspect ratio or fit to content</p >
</div>


SCSS
@mixin aspect-ratio($ratio-or-width, $height: null) {
  $padding: if($height, 
               percentage($height/$ratio-or-width), 
               percentage(1/$ratio-or-width)
            );
  &:before { content:''; float: left; padding-bottom: $padding;  }
  &:after  { content:''; display: table; clear: both;  } 
}

@mixin aspect-ratio($ratio-or-width, $height: null) {
  $padding: if($height, percentage($height/$ratio-or-width), percentage(1/$ratio-or-width));
  &:before { content:''; float: left; padding-bottom: $padding;  }
  &:after  { content:''; display: table; clear: both;  } 
}


div {
  @include aspect-ratio(16,9);
  // ...or by simple ratio
  // @include aspect-ratio(1.777777778);  

  // Not important styling
  background:purple;
  width:33%;
  p { font:12px sans-serif; color:#fff; padding:1rem; margin:0; }
}

Matt

评论永久链接# 2015 年 2 月 18 日

嗨，Jakob，

这是一个非常干净的解决方案！非常棒，谢谢
Augustin

评论永久链接# 2015 年 4 月 7 日

Jakob 的解决方案在编译时有效，这意味着如果比率与屏幕尺寸无关。但这仍然不是真正的响应式纵横比，它允许在高度是限制尺寸时进行拉伸。
还有其他解决方案吗？
Robert

评论永久链接# 2016 年 5 月 26 日

嗨，Jakob，这种方法很棒。我一直在使用它，今天在 FF 中遇到了一个问题。如果应用了纵横比的元素具有 display:flex;，它在 FF 中将无法工作。

http://codepen.io/robertwbradford/pen/gMYZeV

我一直在尝试找到一个解决方案，但还没有找到…
italodr

评论永久链接# 2016 年 10 月 10 日

Robert，我在 flex 和 Firefox 中遇到了这个问题，我发现的一个解决方案是用一个 div 包裹纵横比元素，这样 flexbox 就会影响这个包装器，而不是纵横比元素本身。这将修复 FF 中的问题
（顺便说一下：我的英语不好，请见谅）

我刚 fork 了你的 pen
http://codepen.io/italodr/pen/wzmxxB

Ben

# 2015 年 2 月 12 日

作为相关的旁白，我写了这个 sass mixin 来让 css 背景图片保持其纵横比。
这允许你通过断点在较小的（移动）屏幕上不下载/显示图像，但让它像 html < img > 一样运行，并在你显示它时响应式地保持其纵横比

// Calc image intrinsic aspect ratio
@function get-img-aspect-ratio($img-url){
$img-height: image-height(“#{$img-url}”);
$img-width: image-width(“#{$img-url}”);
$aspect-ratio: $img-height / $img-width;

@return $aspect-ratio;
}

@mixin intrinsic-ratio-bg-img($img-url){
background-size: contain; // note: could also use ‘cover’ but it is less supported.
background-position: top right;
background-repeat: no-repeat;
padding-top: percentage(get-img-aspect-ratio($img-url));
height: 0px !important;
display: block;
}

zolu

评论永久链接# 2015 年 8 月 24 日

你能告诉我如何将这个 mixin 用于带有 css 背景图片的 div 吗？
Ben

评论永久链接# 2015 年 8 月 25 日

@Zolu

div{
@include intrinsic-ratio-bg-img(“/path-to-image/image.jpg”)
}

这就是你问的吗？

Max Rocket

# 2015 年 6 月 16 日

太棒了！谢谢，这帮我省下了几个小时的烦恼！

Kay

# 2015 年 9 月 18 日

这帮助我解决了在 bootstrap 列中修复子元素高度的问题，以确保砌体布局中列的连续分布。非常感谢！

shawn

# 2016 年 3 月 17 日

一个朋友向我展示了这个技巧，它在我的 Chrome 开发过程中似乎很有效。但当我用 Firefox 测试时，它却不起作用。知道为什么吗？似乎 before 填充没有被尊重。

shawn

评论永久链接# 2016 年 3 月 17 日

事实证明我的父级 div 的样式是“display:flex”，我通过将样式更改为“display:block”解决了这个问题。
zazzy

评论永久链接# 2016 年 6 月 3 日

这有效！非常感谢 :)
Max

评论永久链接# 2017 年 2 月 19 日

我爱你们为这个修复付出的努力！！我在 Firefox 上快疯了 :D

Thora

# 2016 年 11 月 30 日

这非常有效！我不是程序员，所以我是把我的网站拼凑起来，这里那里添加一些东西，并尝试弄明白。这是完全可以理解的！我用它来阻止我的幻灯片在页面顶部跳动。太棒了！！

谢谢。

Thora

sanbor

# 2016 年 12 月 2 日

非常酷！如果你没有使用 css 预处理器，你也可以使用 css calc() 来计算它。工作示例：http://codepen.io/anon/pen/bBLGWL

不要忘记调整视窗大小！

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <style>
      .Image {
        background-image: url(http://placehold.it/350x150);
        background-repeat: no-repeat;
        background-size: contain;
        position: relative;
        width: 100%;
        max-width: 350px;
      }
      .Image:before {
        display: block;
        content: "";
        width: 100%;
        padding-top: calc(((150/350) * 100%));
      }
      .Image > .content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="Image"></div>
    <div class="Image"></div>
    <div class="Image"></div>
    <div class="Image"></div>
  </body>

</html>

Michel Joanisse

# 2017 年 3 月 8 日

当使用这种方法并对父元素应用底部边距或边框时，会发生一种奇怪的行为。如果它只有 1 像素，你就会看到在某些情况下 Safari 不会相应地呈现属性，导致没有空格或边框。在 Safari 中调整窗口大小以查看我的意思。

演示： http://codepen.io/mjoanisse/pen/zZNOGr/

为了解决这个问题，你可以使用 ::after 伪类并将元素绝对定位，使其固定在框的底部。也就是说，它很 hacky 而且有局限性。

我很想知道是否有谁有解决这个问题的巧妙方法。

Andrea

# 2017 年 5 月 15 日

我希望有一个 DIV 在容器高度改变时也能保持比例不变。
有人知道怎么做吗？
提前谢谢！

Tobi Reif

# 2018 年 5 月 4 日

Jordy

# 2018 年 8 月 8 日

也可以不用 before 伪元素。可以用 calc() 和 vw 单位代替 % 单位。
另一个优点是可以使用 flex-box 或 grid 等。

演示:

Lazza

# 2019 年 10 月 7 日

我从 Sérgio Gomes 提出的解决方案中制作了一个 mixin 这里

@mixin aspect-ratio($ratio: 1) {
    &::before {
        content: "";
        width: 1px;
        margin-left: -1px;
        float: left;
        height: 0;
        padding-top: 100% / $ratio;
      }
      &::after {
        content: "";
        display: table;
        clear: both;
      }
}

到目前为止，这绝对是最好的一个。它不需要包装元素，并且会在必要时进行扩展。太棒了！

演示

评论

发表评论 取消回复

发表评论取消回复