CSS 中 calc() 的應用

css中calc的應用

• 假設要實現如下功能，隨着視圖的變化，圖片始終保持如圖的比列，放大或縮小

• 

• 圖片動態演示

• 

實現

1. 抽象一下如圖所示

• 

• aw：寬高比寬度
• ah：寬高比高度
• w1：大圖像的寬度
• h1：大圖像的高度
• w2：小圖像的寬度
• h2: 小圖像的高度
• m：圖像之間的邊距

2. 結合圖能夠獲得以下表達式

• 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的應用
• demo-codeopen演示