尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:8 i0 p9 m9 I O. w+ S
! N7 @' A; f3 S8 O z2 i
- 圖片按正常比例縮小
9 x, O* ]6 Y1 D' U- q
; B7 ?4 d1 e% L- ~7 v( p8 T5 d& |- img {( S5 x" ~" _9 O5 T; L
- max-height:200px; /*此處以最大高度為例*/
% R0 c: a) ^* @. @ - width:inherit;
5 U7 i; P9 C5 _- q- T - height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
4 e3 o1 ~2 l$ u! \& e - overflow:hidden; /*超過不顯示*/
6 u! ]' K# K6 W; X; U8 \9 i- Z - }
8 }4 C- V6 _) i2 s) N2 q$ r4 N5 ~0 N- 圖片水平垂直置中
+ W+ E! c7 z9 G4 U: M9 [
& i3 m' L f2 B" G有很多方法,但目前為止使用 Flexbox方法是最簡單的方式: v0 g S! S, s: d
而它也能讓裡面的圖片自適應外面框架
' k( S4 x5 ?# u3 z+ i用的方法很簡單，只要在最外層定義好語法就能使用
) R d/ k7 Z1 u" u$ [1 U4 }% _% Y1 }" D; N4 i6 S
html語法
" m* R8 D9 G( G) V8 I5 q$ J: t& f- <div class="exam">
+ e9 z+ P) I8 j% L - <img src="圖片路徑">$ Z9 v3 W" }7 o1 c" c
- </div>
- .exam{/ q o$ X0 b5 _- G. w
- width: 150px;# a+ u; B8 i+ F: l7 C9 a$ o: V! R
- height: 150px;
8 @6 t: G2 e) n; Y! L# N; Q" F - max-width: 100%;' v. L; ~7 ~% k% m! g8 P+ J- Q3 ~
- background-color: #eb9700;
x* P5 u& @ r+ O6 t, u - display: flex;) \. d; P9 E; t; v
- align-items: center; /*垂直置中*/
6 M) S* x. }; x5 g: ^& W2 ` - justify-content: center; /*水平置中*/
4 }7 s3 Q" J: F' E, y - }
|
|
發表於 2018-3-25 21:06:12
