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

IT_man

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
, Y7 g9 x7 D3 P+ ^
9 e( y6 E$ \0 V6 c2 i

• 圖片按正常比例縮小
  

& |1 y0 f# p$ o5 Y

1. img {
   ! r7 |7 U/ Q8 w; }
2.     max-height:200px; /*此處以最大高度為例*/
   1 @! a8 T# r2 ?0 k. `' K. p
3.     width:inherit;
   
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   1 H9 j& t' V3 }* W) k. W- J7 Q$ M8 V
5.     overflow:hidden;      /*超過不顯示*/
   - a- p- i8 f3 @1 x7 [9 E- g
6. }

複製代碼

• 圖片水平垂直置中
  

& g0 P$ [: L) \: o8 A( O+ `有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
1 W; B  K4 a9 Z# w! G$ s6 S而它也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用

3 B( T% C1 o' u/ jhtml語法

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

複製代碼

css語法
# o& W1 D8 y/ ?: v7 {, u

1. .exam{
   
2.     width: 150px;
   ' A8 d1 p% `4 f9 W* a! T
3.     height: 150px;
   ) r7 H4 s* s7 s! S0 I
4.     max-width:  100%;
   
5.     background-color:  #eb9700;
   
6.     display:  flex;
   ; M/ V& \8 P# O$ I0 M4 }) J2 Z
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   5 G1 L7 \- |% {5 Z" A& c
9.     }

複製代碼