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

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

" Z9 u( w% L: A0 Z  I% {
6 f; y, D# ]" i# k, K( |- A" z& O
  1. img {
    . y+ ~) @/ w4 a. \) R  o) Q' w
  2.     max-height:200px; /*此處以最大高度為例*/
    7 }; n0 b" @( P$ T; g; \
  3.     width:inherit;' Z( [: M5 c$ Z
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
    " ~+ E4 i' G2 k% S
  5.     overflow:hidden;      /*超過不顯示*/  t6 {2 S# z, u, Z
  6. }
複製代碼

+ E3 ^4 |8 V: \& L2 f, Y0 `! F9 U
/ k6 D8 @. m: n1 W3 i7 G( l3 w有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
2 o5 q) h4 h3 F4 L! r而它也能讓裡面的圖片自適應外面框架/ `# G- n9 F' L% N
用的方法很簡單，只要在最外層定義好語法就能使用
) z! O- g' S& ?  i+ `# d# C2 c# p9 N  w6 j! {0 n1 J
html語法
1 z+ y* d# F2 U, s% P8 w8 o
  1. <div class="exam">$ B$ S0 s1 D0 B  N
  2.    <img src="圖片路徑">+ M' j/ Y- _. \8 D# z! `( X
  3. </div>
複製代碼
css語法6 c6 P2 v1 q- p' ~$ h5 ]* I2 g0 a1 [
  1. .exam{
    6 L6 E) O. r+ x& Z$ G, M
  2.     width: 150px;
    5 I3 b, k0 B0 I& t+ Q
  3.     height: 150px;
    $ f" A0 e: x" E, a" t& e. p% D
  4.     max-width:  100%;
    / c, Q# ~$ s) M" m
  5.     background-color:  #eb9700;
    8 T6 k( ]/ o7 J9 Q+ X. h( Y, l
  6.     display:  flex;
    3 U% K0 i1 |" |9 h7 v( \
  7.     align-items: center; /*垂直置中*/
    - j" m: K! ?' B3 o6 U: L# A
  8.     justify-content:  center; /*水平置中*/' B' {2 E% ?8 }' e5 g4 A. d4 B+ ^% h" p( _
  9.     }
複製代碼




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