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

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

1 f& {$ t! ?, h7 W9 L8 F; n' y  O: |' \+ i2 ?0 o
  1. img {8 `& l4 k: N: E$ y
  2.     max-height:200px; /*此處以最大高度為例*/6 [* h7 N2 P, Q3 l4 F* Y' P
  3.     width:inherit;
    ' D6 f/ x+ X/ }6 y& d" S, H7 e1 p2 `
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/3 E) R$ i1 W+ v, k
  5.     overflow:hidden;      /*超過不顯示*/
    8 t& e$ T3 N# n# K! M4 f0 P
  6. }
複製代碼
; a- B% c/ N+ m/ r- n: i

/ e, Q# n/ d& ~" c有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
( A. `/ N& f% o而它也能讓裡面的圖片自適應外面框架' R  z" n( b4 ]. V0 T. u$ X' D8 I$ j
用的方法很簡單，只要在最外層定義好語法就能使用
7 A8 a9 A/ {- N" ^( J
8 v( N8 g( W/ f" ~" ]html語法
! d) D6 ?3 S. b0 I6 U5 U
  1. <div class="exam">; X" D6 v9 I0 V! F& N5 v
  2.    <img src="圖片路徑">' _* Q. y& L$ m6 W* i; I
  3. </div>
複製代碼
css語法
7 U. I9 Y7 l/ ~; {! q; c
  1. .exam{% g0 [) N: D1 f. g1 ?+ \- V8 h% f
  2.     width: 150px;
    ( b4 p( G1 e# v: q
  3.     height: 150px;
    * G+ V) j9 I& K9 m
  4.     max-width:  100%;8 T3 M5 E" w' e
  5.     background-color:  #eb9700;
    * [0 Y* V: |, ^- m+ p; T, V; Z
  6.     display:  flex;
    ; J% Z7 H& |8 o! f/ W
  7.     align-items: center; /*垂直置中*/& z' y" H  a1 {* t' }' N
  8.     justify-content:  center; /*水平置中*/. m# x' a0 Q9 y/ [$ U
  9.     }
複製代碼




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