52AV手機A片王|52AV.ONE

標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中 [打印本頁]
作者: IT_man    時間: 2018-3-25 21:06
標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中
尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
( {% ?( X+ d; F$ p; S! J4 q: P: v2 J: h
8 t9 r+ N5 ?$ F. R; c
  1. img {4 N' N3 y2 v' H7 o4 M/ G, x
  2.     max-height:200px; /*此處以最大高度為例*/" g' o( ]# w0 B6 k( C
  3.     width:inherit;
    3 a, w: y) ?" p8 A, f2 y9 M
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
    % H1 G' k+ g% u# G6 d
  5.     overflow:hidden;      /*超過不顯示*/, E2 J3 E" v8 N2 P7 d8 w
  6. }
複製代碼

; V5 r3 A9 N! B! i1 I* v" o7 N0 |4 S! ?+ L/ k* E0 f, c$ B1 |
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
/ x$ s( O" `& c2 r( v而它也能讓裡面的圖片自適應外面框架
7 u+ c" J3 D5 h& Y2 `" L6 Z4 d用的方法很簡單，只要在最外層定義好語法就能使用
% o% n" a* H" z, N' z2 B+ q& N$ f! P" _# V8 S: T: L- L
html語法
4 G1 K' m0 M$ r) X
  1. <div class="exam">
    7 N5 x% F' j. A4 o: X" n( R' n5 S
  2.    <img src="圖片路徑">
    - c) z* V% a) N& J
  3. </div>
複製代碼
css語法
+ W: t4 w5 M3 U! o: O  \
  1. .exam{
    : C7 q) m/ m% v6 R1 c3 L: R1 T) s, {
  2.     width: 150px;
    . V, F4 E. a2 a
  3.     height: 150px;0 [: u, @, C% ]/ w5 @8 N( H
  4.     max-width:  100%;% ~0 O0 W/ ~8 f" _! Y6 P
  5.     background-color:  #eb9700;# C4 O8 A8 Z: G, T) T5 u6 p7 g
  6.     display:  flex;
    5 }4 n4 e' e6 O* Z3 o& S/ h) K
  7.     align-items: center; /*垂直置中*/
    5 I5 h" ?  s* p- Y  r: D) C+ L8 z
  8.     justify-content:  center; /*水平置中*/
    9 c/ }; Y. ?/ O/ K/ s6 o
  9.     }
複製代碼




歡迎光臨 52AV手機A片王|52AV.ONE (https://www.52av.one/) Powered by Discuz! X3.2