html css safari flex

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

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

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

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

----

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%);
    }
  }
}

在 .box的外層設定寬度 width:400px ,.box本身把height改為0,再加入 padding-bottom100%,此時容器就會是寬:高=1:1的狀態。

*在這邊補充常用比例,若是想要4:3,則padding-bottom為75%;若是16:9,則padding-bottom為56.25%。*

而在img的部分需要用 position: absolute的方式來定位在父元素上,在舉例的css中是以置中的設定來做展示。

另外由於每張圖片尺寸不同,想要將圖片完美填滿父層容器,就需要加上 overflow: hidden; 將超出去的部分隱藏。

如此一來就可以完美讓每張圖片以同樣的比例呈現,也更好的在不同裝置上自適應尺寸排版。

 

----

參考資料:

https://zhuanlan.zhihu.com/p/370015300

https://pjchender.dev/css/css-aspect-ratio/

王淳藝 Celia Wang