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

IT_man

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

( ~+ ~3 q% N' E# t, e- ]

• 圖片按正常比例縮小
  

; Z1 O) J( i1 Z$ x+ t, ~8 {

1. img {
   
2.     max-height:200px; /*此處以最大高度為例*/
   + N- Y: o6 t3 Y# E0 U
3.     width:inherit;
   6 a& ?7 R% I  `) M
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   
5.     overflow:hidden;      /*超過不顯示*/
   * i6 h4 B% ~9 ^$ T2 V, a, ]% f
6. }

複製代碼

• 圖片水平垂直置中
  - q/ t5 M( q' T- C* c* i2 i5 t

有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
4 @. C& R% m" W) ?& b& N而它也能讓裡面的圖片自適應外面框架
用的方法很簡單，只要在最外層定義好語法就能使用

html語法
" {9 C7 n' h4 t' O+ v5 z2 S) }5 ?

1. <div class="exam">
   
2.    <img src="圖片路徑">
   6 @$ n! A: I) D+ {) @$ Y  a# A' Q
3. </div>

複製代碼

css語法

1. .exam{
   
2.     width: 150px;
   7 r1 h, `' |3 T
3.     height: 150px;
   
4.     max-width:  100%;
   
5.     background-color:  #eb9700;
   
6.     display:  flex;
   9 _, h) p; k4 t8 Y+ p# e; a
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
     c- @6 Y( g# T. ]+ x9 C2 ^# |
9.     }

複製代碼