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

標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中 [打印本頁]
作者: IT_man    時間: 2018-3-25 21:06
標題: 利用CSS將圖片按正常比例縮小不致變形,並讓圖形水平垂直置中
尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
9 U7 x6 u* ^! J: t+ Z% W$ ~% n8 w" U4 x' X! F  ~

4 v2 x9 \& L; i! ]" V
  1. img {
    , z& C: G. z+ x8 B: d( _2 C5 k
  2.     max-height:200px; /*此處以最大高度為例*/
    6 A: }6 h9 `9 M: a5 r, H' q
  3.     width:inherit;
    5 ?0 b- r, t* h! M- C3 @/ I3 p
  4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/. m+ j" L  `+ h" Y- R
  5.     overflow:hidden;      /*超過不顯示*/
    / }' q' \7 b  D; Y' Z
  6. }
複製代碼

+ I$ |+ K  u) z4 Q* C+ M  z' h
0 l3 T3 Z: y7 O, [% U有很多方法,但目前為止使用 Flexbox方法是最簡單的方式: K1 i  F9 p, a! a
而它也能讓裡面的圖片自適應外面框架2 u' n! K" P6 x! [7 k/ P' G
用的方法很簡單，只要在最外層定義好語法就能使用
5 J# a9 ?4 N0 b! T) y, J# ^1 k# f! W& `5 ^% |! p% R- n. E
html語法: n; u" W' Z3 T' L1 G( g
  1. <div class="exam">
    ! C, r# m: ^& P0 b# @
  2.    <img src="圖片路徑">1 R+ l4 y7 i3 @# n1 e$ `
  3. </div>
複製代碼
css語法1 b+ l0 m+ I$ ]4 z3 G8 ?3 O
  1. .exam{
    ' b* U$ v+ L, `
  2.     width: 150px;, `4 w- @3 G0 C- l' l
  3.     height: 150px;0 T- Y0 i6 g$ M, ~4 g$ L3 r7 H/ e
  4.     max-width:  100%;
    5 [# f  w2 N6 z9 T4 \  _' _) ^
  5.     background-color:  #eb9700;. x1 |4 E) X( T6 @. Q% I( Q: v! f
  6.     display:  flex;9 B+ H2 y( }  b# H8 R' o5 r
  7.     align-items: center; /*垂直置中*/, D  J* R& d4 O$ ?/ z3 k; m" k
  8.     justify-content:  center; /*水平置中*/- a: C4 Y4 s' Z; l* r
  9.     }
複製代碼




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