在切相簿功能時，有時候會遇到都出來的圖片大小不一的情形，一般處理的方式就是縮小至某一尺寸後擷取固定的大小，超出尺寸的裁掉；或者是破壞圖片的比例，將長寬壓縮至該尺寸（這樣真的很醜）。如果客戶不希望裁切圖片，而設計師又無法忍受變形的圖片時，真的很令人苦惱。
以下就是既可以保持圖片原有比例，又不用裁切圖片的兩種方法，前提是這兩種方法圖片外都必須包著容器。

ㄧ：利用:after設定百分比

先設定容器為position:relative以及容器的:after為display: block，
再計算所需設定的圖片長寬比-(高/寬)*100。
常用比例如下:

圖片比	1:1	4:3	16:9
padding-top數值	100%	75%	56.25%

.boxtag {
    width: W;/*容器寬*/
    height: H;/*容器高*/
    position:relative;
    overflow:hidden;
}
.boxtag:after {
    padding-top: X%;/*設定寬比高的比例，X=(H/W)*100*/
    content:"";
    display: block;
}
.boxtag img {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    max-width:100%;
    max-height:H;/*圖片高度不可超過容器高度*/
    margin:auto;
}

提醒，此方法的圖片高度不可超過容器高度!!!

二：利用line-height及vertical-align

先設定容器的長與寬，並設定容器的line-height與容器高相同
將容器內容設為水平置中text-align: center，容器內的圖片為垂直置中vertical-align:middle

.boxtag {
  width: W;/*容器寬*/
  height: H;/*容器高*/
  line-height:H;/*line-height等同容器高度*/
  text-align: center;/*設定圖片水平置中*/
  overflow:hidden;
}
.boxtag img {
  max-width: W;
  max-height: H;
  vertical-align:middle;/*設定圖片垂直置中*/
}

範例如下