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

標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中 [打印本頁]
作者: IT_man    時間: 2018-3-25 21:06
標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中
尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:# c* a, E. a2 y) u5 i0 P* r
' R4 Y, t- z% K, u

4 F: E  n& f( C( z* ^0 K4 _
  1. img {
    5 x: _* s5 E! P  J! w% Q
  2.     max-height:200px; /*此處以最大高度為例*/
    8 r7 V* M9 B4 B" X5 L) \% w
  3.     width:inherit;4 h. r( A' k3 g
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/$ |  k6 F) v& p" z) T2 l4 x9 a
  5.     overflow:hidden;      /*超過不顯示*/; C1 s- c& P0 E. ^0 u4 n$ w# h
  6. }
複製代碼

, T+ I0 @. ?$ m( c
3 J4 }" p- G/ j+ b2 n有很多方法,但目前為止使用 Flexbox方法是最簡單的方式$ k$ \9 d8 ^* o) O) C
而它也能讓裡面的圖片自適應外面框架2 W: k# ~% h: C9 S, {
用的方法很簡單，只要在最外層定義好語法就能使用
8 i: \; r  J5 ?4 Q1 f6 j  M; }$ P
3 s. ^( h' t# S1 `; N% fhtml語法/ g, z4 o* k6 z1 z! |
  1. <div class="exam">" z2 X' E7 T% l# @4 w  }3 A
  2.    <img src="圖片路徑">
    . S& s( m. d8 [9 a+ \
  3. </div>
複製代碼
css語法
' t# ~4 u- w  Q
  1. .exam{- Y7 O$ d0 }; _0 d: }4 D
  2.     width: 150px;
      N2 u1 j5 A, C% `) n
  3.     height: 150px;
      J' B) t; F: |+ ]1 ]+ r
  4.     max-width:  100%;7 v) E* N. P# X7 _: D8 e. f9 [9 t
  5.     background-color:  #eb9700;
    + Y! C5 z7 e$ d. m: z, k
  6.     display:  flex;
    8 L. r& K/ N- l2 q
  7.     align-items: center; /*垂直置中*/5 R6 P- p$ h9 |" w4 E/ e
  8.     justify-content:  center; /*水平置中*/
    0 [! W" U7 S* S. T
  9.     }
複製代碼




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