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

IT_man

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

9 a( d; Q0 T8 Y

• 圖片按正常比例縮小
  

! ~) w( ?  s1 d8 s, D) [; O- f, c

1. img {
   $ E6 y' l# y; \/ b- v
2.     max-height:200px; /*此處以最大高度為例*/
   
3.     width:inherit;
   ( R7 o' ^1 r3 A- o* B) ~
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   * x# ?1 _: O/ T' y; O( M
5.     overflow:hidden;      /*超過不顯示*/
   / i" Q/ {1 N) k. _
6. }

複製代碼

• 圖片水平垂直置中
  

4 N3 i& t( f2 v9 B$ `有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
% e& t( A" T) h: l. o! u而它也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用
- I( M) o. S" @  K2 t5 i& V. `
, o' V0 x/ r/ x  O; {$ }html語法
- n; B3 b; A, u  o' U3 Z1 M

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

複製代碼

css語法

1. .exam{
   
2.     width: 150px;
   * j3 R. n: C; W4 e8 U+ g) E
3.     height: 150px;
   / Z" o$ d) l3 r' ?
4.     max-width:  100%;
   8 P9 I# [8 q# [/ \
5.     background-color:  #eb9700;
   2 k6 n" N& D8 Y" o& L* q
6.     display:  flex;
   
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   
9.     }

複製代碼