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

標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中 [打印本頁]
作者: IT_man    時間: 2018-3-25 21:06
標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中
尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:2 o+ s# N! B. ?! P. H3 F

$ t6 u  x$ A9 C
. z: G4 J' v0 E) N
  1. img {
    1 J" X, o' g- j) M* }
  2.     max-height:200px; /*此處以最大高度為例*/
    + G) T, k. Q) Z
  3.     width:inherit;
    4 @  q, t, A% X6 h5 ?( }$ O
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
    ( ~( v5 V) `% W' @5 o, v
  5.     overflow:hidden;      /*超過不顯示*/( O! I9 k" s; H  y7 T1 P% |
  6. }
複製代碼

+ o4 a# e" {0 H3 v5 w; x% M1 y
3 G' [- w( Q1 A. d  p3 s; M. _+ p+ N8 `% b有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
- }, [. O" k+ F而它也能讓裡面的圖片自適應外面框架, ?0 i; h2 I+ ~8 b" {; c) f
用的方法很簡單，只要在最外層定義好語法就能使用$ Y, G0 T, t# ^1 P4 ?$ P

2 W( Z4 W9 Y2 h' D/ A* E/ d/ {# p: Uhtml語法
; g5 d, S9 F6 R9 x, e. {3 G
  1. <div class="exam">
    % T. W- B4 t2 x" S( V5 y
  2.    <img src="圖片路徑">
    & b" r9 J& ?' P: U  \
  3. </div>
複製代碼
css語法( [, b) _7 J7 ^7 e4 c7 ?/ d4 e, A# z
  1. .exam{
    4 X. C, Y; B  D/ Y  J
  2.     width: 150px;6 O- l) m( \) N1 Q' O
  3.     height: 150px;
    ' x8 H6 l* N, k, r7 M
  4.     max-width:  100%;& ~3 |0 g# r' L9 ~: K+ j5 K# x
  5.     background-color:  #eb9700;
    $ |: d% ?9 v; m& d
  6.     display:  flex;
    7 j$ T2 r$ e9 h
  7.     align-items: center; /*垂直置中*/8 g& R7 t, ^* Z5 F: R1 b. s; F# _$ |
  8.     justify-content:  center; /*水平置中*/
    # `/ z, U$ M& Y
  9.     }
複製代碼




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