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

標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中 [打印本頁]
作者: IT_man    時間: 2018-3-25 21:06
標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中
尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
! u5 a) L, d1 I/ |+ ?" x2 H, U5 D3 s& k
! p6 v" g+ P  Q: a
  1. img {' Q2 K' Y5 J/ q) |6 S6 l7 V; ?9 v
  2.     max-height:200px; /*此處以最大高度為例*/* L$ z7 M$ b$ H7 R
  3.     width:inherit;. i0 O* Z# a* A4 `) E2 i
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
    ' s5 D0 g# N" `( }# N
  5.     overflow:hidden;      /*超過不顯示*/
    % Y9 S  N2 \; W  k; @
  6. }
複製代碼
3 L  l) c! p6 R5 Q- }! H& q

6 G9 T; \: d, v3 D有很多方法,但目前為止使用 Flexbox方法是最簡單的方式% r+ C* R* \- e) L. S
而它也能讓裡面的圖片自適應外面框架- {7 p  U$ l& L5 F: l1 V! W# ?& u
用的方法很簡單，只要在最外層定義好語法就能使用* M* I1 A* a2 I! i

, a1 s$ W1 D: X2 g$ }0 d- thtml語法
% V$ J; _! i* \9 R
  1. <div class="exam">; K. m- X( k4 R2 B  v
  2.    <img src="圖片路徑">
      \9 v  z# Y8 `9 k# ]' J
  3. </div>
複製代碼
css語法  I  R4 K/ V0 }2 z& e
  1. .exam{
    4 ?% t4 c: H( x9 J5 O8 \
  2.     width: 150px;
    . F1 C+ ^3 U  t- s, M
  3.     height: 150px;- P+ }5 O  T4 h/ S1 g
  4.     max-width:  100%;7 q* M& ^+ N2 K8 L
  5.     background-color:  #eb9700;0 ^+ Y& C8 e& E0 Q
  6.     display:  flex;! r! H: c( R/ z
  7.     align-items: center; /*垂直置中*/+ _, Z' I8 ]# B0 `( r( d3 `7 K
  8.     justify-content:  center; /*水平置中*/
    8 b* }" C0 U6 C
  9.     }
複製代碼




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