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

用戶名  找回密碼
 立即註冊
快捷導航
  • 我愛av論壇BBS
  • 手機A片
  • 自拍偷拍外流區
  • 貼圖區
  • 52av裸聊室
  • 中文-中國主播

     
查看: 4626|回復: 0
打印 上一主題 下一主題

[HTML] 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中

[複製鏈接]
跳轉到指定樓層
樓主
發表於 2018-3-25 21:06:12 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
1 j6 V/ O4 ^$ T* t- }& M
  A' C. u5 T8 @- C' w  K% v* `$ s
  • 圖片按正常比例縮小
    % C( \* f$ B5 b- ~" U
7 P8 E: X, a1 [" q: F
  1. img {
    , B* C& J5 O3 M0 Z; T% |) ^  E
  2.     max-height:200px; /*此處以最大高度為例*/0 q/ w3 S6 J+ a+ m6 q+ J( Q
  3.     width:inherit;7 f' M! w) V9 S  D5 D* f8 F) I
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
    3 B1 W2 S2 c! u4 w& q$ r) r
  5.     overflow:hidden;      /*超過不顯示*/; }+ `. f5 m; i) _6 l% e
  6. }
複製代碼
7 r/ \6 x9 Z. B. m" o
  • 圖片水平垂直置中8 C7 c3 v6 K1 F  P1 C0 n
! C( U1 ]4 K9 Z1 {: T& H
有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
6 I% g7 Z- U4 W! a2 ?0 y而它也能讓裡面的圖片自適應外面框架+ O! i, ^9 A: f; Q
用的方法很簡單,只要在最外層定義好語法就能使用
4 _* I+ [# U6 F+ O# J; h  X) O8 Z- K
html語法1 M0 q: l) B7 ^2 ^! p6 L
  1. <div class="exam">
    6 @" {, ~4 ]! R; \" {% n6 w
  2.    <img src="圖片路徑">
    , N' O' R, _0 R
  3. </div>
複製代碼
css語法: K/ h% J6 R7 [2 ?8 o' _/ P0 d& P
  1. .exam{; N3 J7 E5 F4 S6 Q5 R9 {
  2.     width: 150px;3 ~& [$ C5 C1 m: x
  3.     height: 150px;
    0 l1 y9 A, x/ R( s. [' F  Y; y
  4.     max-width:  100%;
    3 G6 t3 b, |" c2 n7 N1 P& g
  5.     background-color:  #eb9700;0 \- b: h" _# M( V, c. n& S0 s
  6.     display:  flex;
    6 W8 x" }: @0 G# e2 T$ a
  7.     align-items: center; /*垂直置中*/2 r7 V9 p) E7 d0 X
  8.     justify-content:  center; /*水平置中*/2 d; n  H8 M% e5 |' e) H! o3 z
  9.     }
複製代碼
回復

舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則
















聚BT福利

本區塊內容依據『電腦網路內容分級處理辦法』為限制級網站,限定年滿18歲以上或達當地國家法定年齡人士方可進入,且願接受本站各項條款,未滿18歲 謝絕進入瀏覽。為防範未滿18歲之未成年網友瀏覽網路上限制級內容的圖文資訊,建議您可進行網路內容分級組織ICRA分級服務的安裝與設定。 (為還給愛護 本站的網友一個純淨的論壇環境,本站設有管理員)

QQ|小黑屋|手機板|52AV手機A片王

GMT+8, 2025-2-16 01:54 , Processed in 0.064167 second(s), 15 queries .

連絡站長.廣告招商

52avtv@gmail.com | QQ:2405733034     since 2015-01

裸聊妹 快速回復 返回頂部 返回列表