CSS 中 calc() 的应用

最新推荐文章于 2025-06-25 15:44:45 发布

转载最新推荐文章于 2025-06-25 15:44:45 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bfb751cf265da614f6ffb28

本文介绍如何使用CSS中的calc函数实现响应式布局，确保图片在不同视图下保持比例不变。通过数学公式推导，得出图片宽度的计算方式，适用于多张图片并排展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css中calc的应用

假设要实现以下功能，随着视图的变化，图片始终保持如图的比列，放大或缩小
图片动态演示

实现

抽象一下如图所示

aw：宽高比宽度
ah：宽高比高度
w1：大图像的宽度
h1：大图像的高度
w2：小图像的宽度
h2: 小图像的高度
m：图像之间的边距

结合图可以得到如下表达式

w1 + m + w2 = 100%
2 × h2 + m = h1
w1 / aw × ah = h1
w2 / aw × ah = h2
现在开始求解决w1（然后是w2）。开始在公式2）中分别用公式3）和4）代替h1和h2，然后求解为w2如图所示：
然后，我可以在公式1）中用w2的结果替换它，并为w1求解：
用红色圈出的结尾处的表达式。它只包含边距，宽高比宽度和宽高比高度 - 在运行时都不会改变。因此，它是我们可以在构建时预先计算的常数值。为方便起见，我将此命名为常量值c：

c = (m × aw) / (ah × 3)

w1 = 2/3 × (100% − m) + c
w2 = 1/3 × (100% − m) − c
复制代码

代码

<!--html-->
<div class="thumbnails">
  <img src="https://placeimg.com/400/300/animals" alt="A randomly selected animal photo">
  <img src="https://placeimg.com/400/300/nature" alt="A randomly selected nature photo">
  <img src="https://placeimg.com/400/300/arch" alt="A randomly selected archirecture photo">
</div>

<!--scss-->
// Using values from the original design
$margin: 20px;
$aspect-width: 4;
$aspect-height: 3;
// Calculate c
$constant: ($margin * $aspect-width) / ($aspect-height * 3);


.thumbnails {
  width: 50%;
  margin: 0 auto;
  padding: $margin;
  border: 2px solid black;
  overflow: hidden; // crude clearfix
  
  
  // First image becomes big one on left
  > *:first-child {
    display: block;
    float: left;
    margin-right: $margin;

    // Magic formula!
    width: calc( (2 / 3 * (100% - #{$margin}) ) + #{$constant} );
  }

  // 2nd & 3rd images become smaller ones
  // on right
  > *:nth-child(n + 2) {
    display: block;
    float: right;

    // Magic formula!
    width: calc( (1 / 3 * (100% - #{$margin}) ) - #{$constant} );
  }

  // 3rd image also has top margin
  > *:nth-child(3) {
    margin-top: $margin;
  }
}
复制代码

CSS 中 calc() 的应用

css中calc的应用

实现

代码

参考链接