尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
: u9 P1 i' ^" V; a2 A* W/ f! [- T
; y+ U4 F0 D0 e2 x! f% r( ?- 圖片按正常比例縮小" w$ C7 K* I% @ N M
+ ^/ D z/ S b! y- img {0 \! g5 n, Z4 v( `1 j3 I
- max-height:200px; /*此處以最大高度為例*/7 n1 y; i8 `; T/ `/ C
- width:inherit;
+ M1 B. Q; K7 \ v8 p - height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/$ Y: H6 @ ?9 P
- overflow:hidden; /*超過不顯示*/" ]2 C6 s+ i0 s5 B
- }
4 b! M! U; r4 a1 a" x
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
' @$ n# L7 t% f而它也能讓裡面的圖片自適應外面框架
- Q% S5 I K; ^' a- P* d用的方法很簡單，只要在最外層定義好語法就能使用/ {/ x# n8 u X1 I; f4 d8 P/ R
/ I9 Z! N9 @% P, |7 Y+ \
html語法$ P8 p6 q1 s, o* h r; e
- <div class="exam">8 S" l8 A6 r( W" d9 ]; v
- <img src="圖片路徑">% r+ {: w+ @& z) ]5 u0 X
- </div>
5 @ W+ ^; T6 C9 U- .exam{+ g/ s7 X4 ]+ F" r( A8 I1 @
- width: 150px;4 A2 n6 z) v2 R8 C8 A
- height: 150px;- ] x7 R- ]# C& M
- max-width: 100%;
" }& _" m3 `# u" o5 V; }5 e8 O7 ]* | - background-color: #eb9700;2 t+ \: \2 N' Z) @- D9 l& m( Q3 d: J
- display: flex;8 {8 H+ K5 T u2 C- j1 A. y# R
- align-items: center; /*垂直置中*/6 @7 v ?8 R% \$ o; ]
- justify-content: center; /*水平置中*/
* i$ L" Z) K2 J) K" @0 T, H - }
|
|
發表於 2018-3-25 21:06:12
