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

IT_man

tid=77743&尤其是網站的帖子列表,當CSS無設定圖片正常比例縮小,會造成圖形變形,進而讓使用者體驗不佳的不良影響,因此我們就需要改良:
$ y* e. l8 Y1 \
, q, L5 U7 k4 ~; F# z

• 圖片按正常比例縮小
  

1. img {
   " o5 a2 N2 G# L6 z! m- H% D
2.     max-height:200px; /*此處以最大高度為例*/
   ' J4 c9 @/ f! t4 a4 \+ W
3.     width:inherit;
   
4.     height:expression(document.body.clientHeight>200?"200px""auto");/*若圖片高於200px就調整*/
   3 k/ U; l% o* A' b
5.     overflow:hidden;      /*超過不顯示*/
   6 h' @# R6 n! c9 }2 C# p; _3 T
6. }

複製代碼

• 圖片水平垂直置中
  

. d  P' d; |3 I" J+ a3 R有很多方法,但目前為止使用 Flexbox方法是最簡單的方式
! L0 u' {9 ]+ l6 Q2 r" x( t而它也能讓裡面的圖片自適應外面框架
" C" C. [# D7 {3 E( e$ I7 e用的方法很簡單，只要在最外層定義好語法就能使用

: }0 w/ [/ N' J. ^6 Ahtml語法
7 n# C% {: a. z( `- t

1. <div class="exam">
   * ^2 G5 V# i& m! F2 P5 S% y
2.    <img src="圖片路徑">
   
3. </div>

複製代碼

css語法
7 J% j! \( @  f2 c; L! v; I- `

1. .exam{
   3 [- y7 L- Q! G* Q2 W* _: w! Z
2.     width: 150px;
   
3.     height: 150px;
   ; R- [8 e+ D: X* P8 V+ S3 j
4.     max-width:  100%;
   
5.     background-color:  #eb9700;
   
6.     display:  flex;
   
7.     align-items: center; /*垂直置中*/
   
8.     justify-content:  center; /*水平置中*/
   4 ~8 p! t! Y! v& R
9.     }

複製代碼