html css safari flex

CSS：那些踩過的坑教會我的事-01

王淳藝 Celia Wang 2022/11/03 14:56:59

0 1299

有沒有遇過一種尷尬的情況，是在切版時遇到意料之外的問題，但卻一直找不到問題在哪裡？

今天來分享幾個在切版時遇過的狀況，除了分享其中的原因外，也提出解決的方法。

----

NO.1 img在safari中變形伸縮

- 狀況：

<div class="box">
   <img src="../images/bg-two-woman@2x.png" alt="">
</div>

在這個例子中，在img的外層包了一個div，而這個區塊的css如下：

.box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  img {
    height: auto;
  }
}

可以看到在父層的 .box 下了flex的指令，因此目前這個區塊是一個彈性盒子的狀態，

而在safari中，容器為flex的狀態下會預設align-items: stretch;

因此如果沒有在父層定義align-items，且子層又無設定寬度的話，子層的圖片就會被拉伸到與父層一樣的寬度，看起來就會是變形的樣子。

- 解決：

1. 在父層加入 align-items: center;

2. 在子層定義width: 100%; (如果flex-direction: row; 則定義height: 100%;)

3. 在子層加上 margin: 0 auto;

NO.2 想要多張圖片以等比大小排版與縮放

- 狀況：

在這邊可以看到，由於圖片本身的尺寸都不相同，因此排列在一起時會有不對齊高度的狀況產生，在RWD上也無法自適應縮放

html：

<div class="wrap">
  <div class="box-wrap">
    <div class="box">
      <img src="../images/img-1.png" alt="">
    </div>
  </div>
  <div class="box-wrap">
    <div class="box">
      <img src="../images/img-2.png" alt="">
    </div>
  </div>
  <div class="box-wrap">
    <div class="box">
      <img src="../images/img-3.png" alt="">
    </div>
  </div>
</div>

css：

.wrap {
  display: flex;
  align-items: center;
  .box {
    border: solid 1px #252525;
    width: 400px;
    height: 400px;
    margin: 10px;
    img {
      width: 100%;
    }
  }
}

可以發現目前我們使用的方法是固定.box的寬與高，讓圖片比例100%，所以每張圖片就可能出現留白的情況，

而在實際狀況上可能也難以達到每張照片都固定一樣的尺寸比例，因此去設定依照相同比例撐開圖片是最好的解決方法！

- 解決：

用padding-bottom / padding-top比例作為容器高度 -

當 padding-bottom 設定為百分比時，它會去抓該層空間的總寬度為分母，因此目前我們設定寬度400px，padding-bottom若設定100%，

則 padding-bottom 即為 400px。

此時若我們將容器 height 設為 0，如此一來 padding-bottom 的數值就會是唯一決定此容器高度的來源，那麼當我們在RWD時，容器寬度縮減，高度也能夠以等比例的方式同步縮減，就能夠達到圖片等比例縮放的效果。

只需要記得在這邊的padding-bottom(top) ＝ ( image-height / image-width ) * 100%

以下舉例：

.wrap {
  display: flex;
  align-items: center;
  .box-wrap {
    width: 400px;
  }
  .box {
    border: solid 1px #252525;
    width: 100%;
    height: 0;
    border-radius: 8px;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: auto;
      transform: translate(-50%, -50%);
    }
  }
}