尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:. ]/ X$ d8 N8 O' t
! W% k+ @$ I3 f( {( g- 圖片按正常比例縮小, l* L. P/ U9 i" x$ G& H
( l7 x& ^' u# U- img {3 {. U7 r, u: M( p7 E: R
- max-height:200px; /*此處以最大高度為例*/! w( S9 C9 {# G& w5 U
- width:inherit;! n* [& A( a. f3 }$ V; S
- height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/5 ~3 j r4 |9 B4 k
- overflow:hidden; /*超過不顯示*/7 U" O) @+ T, v3 G9 Y: r
- }
複製代碼 p0 I! k- |% u/ z
- 圖片水平垂直置中6 g+ D1 Z% l8 M2 y+ C
: X! R: k1 G- L
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式! Z' Y- Y1 ]! n: u9 q
而它也能讓裡面的圖片自適應外面框架
/ R$ {) X& }' ?3 \# K9 b' _% H用的方法很簡單,只要在最外層定義好語法就能使用
9 ?7 O& R: X5 z! j4 e, j/ g, |
, I8 f' \$ I8 i6 Bhtml語法2 _ I8 d" y$ t# E# P) J
- <div class="exam">) _$ I8 c; z: }
- <img src="圖片路徑">9 L6 Q$ o3 `1 J! Q5 t7 q
- </div>
複製代碼 css語法2 o* O+ V3 W& c8 l$ t$ y
- .exam{9 i7 o, e$ v$ f5 K/ j0 ?
- width: 150px;
6 n( u8 l- y' A, b - height: 150px;# f% I, n1 s; T5 a7 q# k9 j" k: d
- max-width: 100%;
# K9 T y( C, D. G" i: \ - background-color: #eb9700;
Q. z2 e* c- f0 c4 y9 t: c - display: flex;
+ d. G6 k7 ?- o c - align-items: center; /*垂直置中*/* a7 N1 Z. n9 o: \, Y/ r
- justify-content: center; /*水平置中*/
! Q; E, H. e1 Q+ D' _4 P) q - }
複製代碼 |
|