tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
% q, T. J/ Q& b: t- K2 A, I& o n8 w# z& @$ d# b+ ?6 s
- 圖片按正常比例縮小1 k0 c: @5 p) H2 \+ T. _0 j* g
# x \) h3 W$ a; l9 A; C" n- img {
N/ t& {& Q u+ b" {& M - max-height:200px; /*此處以最大高度為例*/; d9 u9 F6 a) s9 Q# f- M H5 Q
- width:inherit;$ {/ }# m% A! i$ X. [% l" e
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*// o. y$ m' \0 Q, D
- overflow:hidden; /*超過不顯示*/+ a$ p* C3 u7 Q0 T6 G$ t
- }
複製代碼
0 j& `0 i# Q& ]2 o9 E8 ^- 圖片水平垂直置中
& B6 L- H% ]" C/ Y2 h" W 1 F5 o3 m$ N7 e' u4 {6 a. B3 K
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
* [( |4 ]! g7 ^5 X w4 J而它也能讓裡面的圖片自適應外面框架
. _8 i! |8 D$ o d \* p9 H用的方法很簡單,只要在最外層定義好語法就能使用
' M- {) Y% q: J6 s ^% g1 W
( O+ p9 h; K3 t# {html語法
$ g( T% N1 X. e! d. A0 E$ h$ Q- <div class="exam">) ^. Q# `7 n. C: i! K2 F3 D
- <img src="圖片路徑">
% s: b1 p" c$ x2 j9 _/ @, W* X - </div>
複製代碼 css語法( V; r! m8 w+ v. b
- .exam{
. u- W% h. i( G8 @5 P1 g3 a4 I - width: 150px;
0 T- R/ [- l" N - height: 150px;5 ?6 t) p8 w% b0 k0 r! x( e
- max-width: 100%;
7 u5 L1 p. x: \/ N2 }4 \ - background-color: #eb9700;+ O% _$ K% P, u) U8 F; R
- display: flex;$ [8 x1 ?* v" \; M" _, B8 y
- align-items: center; /*垂直置中*/
6 G, B1 v. S9 o4 h - justify-content: center; /*水平置中*/0 ]0 V2 f0 U9 h! R, O. b! A
- }
複製代碼 |