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

IT_man

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
0 H. W. r9 o% D- U! M
% E) c4 @* L+ l; g7 Y* _

• 圖片按正常比例縮小
  5 I3 i! m$ y+ N, f

1. img {
   
2.     max-height:200px; /*此處以最大高度為例*/
   
3.     width:inherit;
   
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   
5.     overflow:hidden;      /*超過不顯示*/
   1 l1 F7 }4 y) y
6. }

複製代碼

• 圖片水平垂直置中
  ( W- L0 g2 d6 y0 C. e: r6 w

! m4 G, O! |; t, u$ d' o7 j2 H. w* n有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
而它也能讓裡面的圖片自適應外面框架
5 W2 Z" w% g$ d# K) G  ~; D用的方法很簡單，只要在最外層定義好語法就能使用
. G3 I+ A$ u0 y! z
html語法
! M* t8 V# q4 G; r4 b# @8 n8 q

1. <div class="exam">
   
2.    <img src="圖片路徑">
   ! k! w1 T0 d3 X6 p; l) s
3. </div>

複製代碼

css語法
& I1 r4 R5 w0 K1 G( A4 D( o' K

1. .exam{
   
2.     width: 150px;
     y0 h/ t4 [; }4 D" b' ^
3.     height: 150px;
   3 a  j" `, u% m
4.     max-width:  100%;
   
5.     background-color:  #eb9700;
     l+ {" W  {1 R* v. u% Y
6.     display:  flex;
   
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   " L; c) [$ M3 }0 u  R- C
9.     }

複製代碼