利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中

IT_man

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:

; u  ]9 C/ s: O% a; ^0 h

• 圖片按正常比例縮小
  % ]4 i; E3 z5 o) E$ V4 v

$ s& y5 J' i" p, |* y

1. img {
   . G; q1 r8 m$ ]+ Z
2.     max-height:200px; /*此處以最大高度為例*/
   ; S( y, G+ y7 S' k7 u3 Y, W: G$ K
3.     width:inherit;
   / i  ^) g" {. E* e) `) M
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   # B2 Q8 B9 N1 T  G# T+ B
5.     overflow:hidden;      /*超過不顯示*/
   
6. }

複製代碼

0 y4 b, l/ A! N0 r" q) y) d6 N

• 圖片水平垂直置中
  

有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
8 E! H# s/ X9 o6 e而它也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用

" l' o' y0 |# @5 l+ Dhtml語法
. S* d% [8 p. K. T

1. <div class="exam">
   " u/ h# N" s. \
2.    <img src="圖片路徑">
   
3. </div>

複製代碼

css語法
) r$ B& n1 |; m

1. .exam{
   ( m, n: t8 y7 _3 I: h5 U* g6 `# R
2.     width: 150px;
   ; P+ R- f( r  l! y/ E' a6 W
3.     height: 150px;
   . n5 F, J+ ^+ f2 p6 a# k* }% Z
4.     max-width:  100%;
   + c/ `& Y6 H& t3 t" ?/ P
5.     background-color:  #eb9700;
   4 }- Y9 R- W7 p2 P  c1 Z$ W2 g
6.     display:  flex;
   
7.     align-items: center; /*垂直置中*/
   * M, _5 p9 a, `$ V- T8 u' ?" H
8.     justify-content:  center; /*水平置中*/
   
9.     }

複製代碼