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

 找回密碼
 立即註冊
查看: 1486|回復: 0

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

[複製鏈接]
發表於 2018-3-25 21:06:12 | 顯示全部樓層 |閱讀模式
tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:4 E2 X- ^, y& |# `' e7 ]& G
, r, \$ G0 C$ b7 F
  • 圖片按正常比例縮小8 \5 D. S' v- \4 f
1 P- `+ c. }# S
  1. img {5 X3 [+ h* J$ U) r
  2.     max-height:200px; /*此處以最大高度為例*/
    * l( S# M9 L- d  ]) ~- f( k
  3.     width:inherit;
    ; ^7 s" _6 c3 }$ u8 m, l
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/6 p( Y7 x1 @- ~
  5.     overflow:hidden;      /*超過不顯示*/
    1 ~2 c% s% K( v( ^4 [. `! l0 d* H
  6. }
複製代碼

+ b* m2 r' ^3 u' {* o+ |3 g% q
  • 圖片水平垂直置中- |* L0 t/ g, k: F, b

, m. g' F# s1 |: v7 Y有很多方法,但目前為止使用 Flexbox方法是最簡單的方式& y# m; N% \# ~! g
而它也能讓裡面的圖片自適應外面框架  c/ J/ m& C. `0 z* x- O* y9 U
用的方法很簡單,只要在最外層定義好語法就能使用
, |% d8 @+ C' F4 e( w; Z; x7 m$ P. G4 [8 S
html語法+ T+ B5 B; t( b7 W4 W, x4 W$ l
  1. <div class="exam">
    " M1 g2 r: p( }& p& t' V" H7 E
  2.    <img src="圖片路徑">
    : h+ O, T0 k) Y5 f! k7 H
  3. </div>
複製代碼
css語法
! v; q7 k. p: H) T* p7 @
  1. .exam{
    9 p% B+ I8 Y* f
  2.     width: 150px;
    . {: t$ i3 }. ?
  3.     height: 150px;
    . L, x5 ?% F1 e) B. B( {1 W
  4.     max-width:  100%;, J% l# o* g$ \4 }& _# z3 J
  5.     background-color:  #eb9700;
    9 L' f; X( y$ _- m& S" X
  6.     display:  flex;9 J! i; r1 a3 {  Y, J, _- Y- U
  7.     align-items: center; /*垂直置中*/9 h5 D8 Y4 G4 }
  8.     justify-content:  center; /*水平置中*/. B3 J8 |. G( _% ]5 h
  9.     }
複製代碼
回復

使用道具 舉報

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

本版積分規則



中文酷站排行榜

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

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

GMT+8, 2026-2-4 06:03 , Processed in 0.077230 second(s), 16 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回復 返回頂部 返回列表