tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:8 D v0 T# Z2 p: c% X
. D- e/ `3 y! z% r* v$ l
- 圖片按正常比例縮小8 V6 X! }5 e7 r4 s
* `7 c8 a1 F, B0 ~& l* T, i( L
- img {* {% s; L% G! f( r) D1 l7 Q
- max-height:200px; /*此處以最大高度為例*/
1 m# L. S' m/ n& `( G5 ?" J - width:inherit;7 E4 a! k3 N9 i$ k' n
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/7 ?5 G( @. x9 t& P- w. T8 J
- overflow:hidden; /*超過不顯示*/: ~; i2 J- } z
- }
複製代碼 ) j6 S- s0 ?8 L' t5 o% y2 P
- 圖片水平垂直置中! I: r. S8 t; {: c+ z0 f
% l1 m9 W5 D0 G( i! Q' K有很多方法,但目前為止使用 Flexbox方法是最簡單的方式3 r0 M# _5 T6 ?9 `
而它也能讓裡面的圖片自適應外面框架
, i5 t% L; Y6 U& A( f. z! R用的方法很簡單,只要在最外層定義好語法就能使用4 `8 V5 u2 M* Y0 Q. ~
7 M6 B9 `% O6 w: [: b* F3 Rhtml語法
2 j- @; S, `$ f Q# S- <div class="exam">( M- f. w0 Q5 D' w
- <img src="圖片路徑">- v2 j# X$ L) T% v& p1 m/ R+ d
- </div>
複製代碼 css語法/ y" Q8 M, |9 k" [
- .exam{
0 g& K, E! F V1 H4 I/ X# ` - width: 150px;2 r7 \* b2 q+ }
- height: 150px;, T7 \. I5 |4 p
- max-width: 100%;
! T- A, }1 `9 Z! \ - background-color: #eb9700;
) ~) K9 S1 O1 b0 ?9 G2 n* H+ t - display: flex;0 f' T0 T8 e: g' y8 T) C
- align-items: center; /*垂直置中*/: \# j k' N6 M
- justify-content: center; /*水平置中*/9 N0 o" u* S, _6 L
- }
複製代碼 |