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

IT_man

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
9 i8 m$ J0 M* Y/ ~
: |$ B- G0 y; Z' B! x

• 圖片按正常比例縮小
  

1. img {
   % n5 h' i% h5 i- r/ Y+ ?# X7 Q
2.     max-height:200px; /*此處以最大高度為例*/
   
3.     width:inherit;
   % W, {. G. r' W: f  i$ Z
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   
5.     overflow:hidden;      /*超過不顯示*/
   7 k) z6 s: k* T9 f% G
6. }

複製代碼

$ o2 x! ^+ Y$ Q, T8 `& T2 f! t

• 圖片水平垂直置中
  8 P+ G$ w( n  H4 L( G

有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
而它也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用
; ^. r: V2 E8 ?( v( @7 s
" m* _; m3 F& b6 G: D! }html語法
$ G* p) e% O: G2 l7 \% z

1. <div class="exam">
   
2.    <img src="圖片路徑">
   
3. </div>

複製代碼

css語法

1. .exam{
   
2.     width: 150px;
   
3.     height: 150px;
   
4.     max-width:  100%;
   / l  h+ E: j. G' x; F7 m
5.     background-color:  #eb9700;
   ( l+ b; k9 [4 S0 S# Y& Q
6.     display:  flex;
   
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   # m4 A9 s! p7 X0 K) `
9.     }

複製代碼