tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
+ v5 }9 d( B8 @$ y4 V
* w* ~! q+ o6 h
9 m# b' q& B0 K% q& c: @- img {5 b# f6 s% k% [/ V; w
- max-height:200px; /*此處以最大高度為例*/
) v/ c P) j& A/ ^' s* d; i - width:inherit;9 g' X3 Q/ `- v
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
6 H8 L! b0 n0 z( N - overflow:hidden; /*超過不顯示*/1 h6 d% x3 P+ b$ q8 ^0 c: ]/ h# S
- }
複製代碼
/ a. s, ~8 G/ Z7 k- 圖片水平垂直置中& {$ y$ G6 [: E# ]/ s) a$ c# j
T E% T" K* V4 G有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
6 e0 S! R- d* ]) O5 ]" h& D而它也能讓裡面的圖片自適應外面框架3 c! ?! [' m; B# p2 x. _
用的方法很簡單,只要在最外層定義好語法就能使用" f, m" X! a/ i. Q) D
$ J' w0 n- C9 \$ Ehtml語法
% c; q4 f3 c$ w- ]8 v. Z G- <div class="exam">
: n9 }& h5 R) E' k8 U2 Q& ~( ^ - <img src="圖片路徑">
0 {2 t' W) V7 i" J: E4 I3 J0 ]7 P - </div>
複製代碼 css語法8 N: }' N, Q$ N/ G) X" j$ a
- .exam{
2 X. w1 V: H6 ]) B+ H' `5 r: G - width: 150px;7 `# e5 \4 l/ T$ X2 N$ A. A3 b* l( p
- height: 150px;
' @! O6 ~% K/ r6 g) y. t2 i - max-width: 100%;# _2 b% E. K* _1 w7 z1 ]/ S
- background-color: #eb9700;9 w' I7 t: S- \& |; |2 b
- display: flex;7 L) M) J# T9 Y4 [6 d
- align-items: center; /*垂直置中*/
G" T9 K& Y+ S8 p& f" @/ t - justify-content: center; /*水平置中*/
5 K0 P( Y- g7 m: l; ]1 i: T$ U - }
複製代碼 |