tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:) ~/ H0 Y. w( K
/ R. p( E, o1 G/ V- h; }- `
! r" {6 v1 a6 v1 f i6 S- img {
3 Z+ R1 x0 i2 I( y - max-height:200px; /*此處以最大高度為例*/
; N- B( X2 h1 x& N* r. b! E) z - width:inherit;) j8 V$ c: M- Y9 ` g3 o
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/ S, o* S: A" P F
- overflow:hidden; /*超過不顯示*/3 s4 m l: q! u) ]
- }
複製代碼
& G0 C0 ~) e0 }" U4 n0 x5 ?! B4 B) `0 I) d1 |1 @
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
; U5 y% b/ u- Y7 t& Q! c而它也能讓裡面的圖片自適應外面框架
' @6 M( C) Z. |: b8 G" s7 J用的方法很簡單,只要在最外層定義好語法就能使用3 u! H, d, n. M" V P+ _) a
0 G( n: Z( Y4 ~% m. b Chtml語法
8 g/ o/ w' m/ f2 \- <div class="exam">
: l# x& @) N" u3 m/ c9 g$ g - <img src="圖片路徑">! |$ R" ]. i: N8 \: R
- </div>
複製代碼 css語法) N" f" y$ f4 c5 j( v$ I7 q* t
- .exam{
7 Z* p9 D: n* s4 I9 Y$ n7 j - width: 150px;. S4 V( b! f* T$ i. d8 g0 z
- height: 150px;, O$ B2 G7 f% |) Y
- max-width: 100%;4 q: m5 i8 d# z3 G( T# s
- background-color: #eb9700;
& X3 T, {$ {! |( G9 I/ V: a0 x7 l - display: flex;
, b; Q3 d4 t" P+ ?# T - align-items: center; /*垂直置中*/8 p+ D9 }. C9 ^) X6 l
- justify-content: center; /*水平置中*/4 m6 |7 a1 ^/ z$ n
- }
複製代碼 |