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

IT_man

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
% r( ]6 R9 @/ z: e0 [, y
- g" r4 J( T1 q4 d

• 圖片按正常比例縮小
  $ |& k% p+ ]5 A+ b& g  G

1. img {
   ) K) h+ k# r6 P4 Q' R7 v5 _
2.     max-height:200px; /*此處以最大高度為例*/
   
3.     width:inherit;
   
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   7 T. x% W/ k( R) _; V' w+ l
5.     overflow:hidden;      /*超過不顯示*/
   % k! I( d6 n9 _' ?8 `. [8 T
6. }

複製代碼

* {+ _7 u+ ~; \# g$ A0 Z

• 圖片水平垂直置中
  % [3 }3 K$ u$ ?( i( \

" u* m- _, i7 ?! ~有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
) S* J3 E+ w& e( G( M% T# C0 Y+ j3 ?而它也能讓裡面的圖片自適應外面框架
; t1 O( U0 l, E" H用的方法很簡單，只要在最外層定義好語法就能使用

: \! `$ e- c) Rhtml語法

1. <div class="exam">
   ( n- A5 k: H3 V1 ~# j! b( J
2.    <img src="圖片路徑">
   
3. </div>

複製代碼

css語法
/ t$ u% r# M7 i& _8 j

1. .exam{
   
2.     width: 150px;
   : O& G. [8 w$ Q7 D/ m3 L) k+ b
3.     height: 150px;
   
4.     max-width:  100%;
   # I: s4 u- S; t
5.     background-color:  #eb9700;
   
6.     display:  flex;
   ! Q. q$ H6 p0 o' T) ~; \/ k; I/ I* ?
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   8 c$ V" J) J3 h( Q1 ^& J4 ~; [
9.     }

複製代碼