尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
1 j6 V/ O4 ^$ T* t- }& M A' C. u5 T8 @- C' w K% v* `$ s
- 圖片按正常比例縮小
% C( \* f$ B5 b- ~" U 7 P8 E: X, a1 [" q: F
- img {
, B* C& J5 O3 M0 Z; T% |) ^ E - max-height:200px; /*此處以最大高度為例*/0 q/ w3 S6 J+ a+ m6 q+ J( Q
- width:inherit;7 f' M! w) V9 S D5 D* f8 F) I
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
3 B1 W2 S2 c! u4 w& q$ r) r - overflow:hidden; /*超過不顯示*/; }+ `. f5 m; i) _6 l% e
- }
複製代碼 7 r/ \6 x9 Z. B. m" o
- 圖片水平垂直置中8 C7 c3 v6 K1 F P1 C0 n
! C( U1 ]4 K9 Z1 {: T& H
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
6 I% g7 Z- U4 W! a2 ?0 y而它也能讓裡面的圖片自適應外面框架+ O! i, ^9 A: f; Q
用的方法很簡單,只要在最外層定義好語法就能使用
4 _* I+ [# U6 F+ O# J; h X) O8 Z- K
html語法1 M0 q: l) B7 ^2 ^! p6 L
- <div class="exam">
6 @" {, ~4 ]! R; \" {% n6 w - <img src="圖片路徑">
, N' O' R, _0 R - </div>
複製代碼 css語法: K/ h% J6 R7 [2 ?8 o' _/ P0 d& P
- .exam{; N3 J7 E5 F4 S6 Q5 R9 {
- width: 150px;3 ~& [$ C5 C1 m: x
- height: 150px;
0 l1 y9 A, x/ R( s. [' F Y; y - max-width: 100%;
3 G6 t3 b, |" c2 n7 N1 P& g - background-color: #eb9700;0 \- b: h" _# M( V, c. n& S0 s
- display: flex;
6 W8 x" }: @0 G# e2 T$ a - align-items: center; /*垂直置中*/2 r7 V9 p) E7 d0 X
- justify-content: center; /*水平置中*/2 d; n H8 M% e5 |' e) H! o3 z
- }
複製代碼 |
|