在切相簿功能時，有時候會遇到都出來的圖片大小不一的情形，一般處理的方式就是縮小至某一尺寸後擷取固定的大小，超出尺寸的裁掉；或者是破壞圖片的比例，將長寬壓縮至該尺寸（這樣真的很醜）。如果客戶不希望裁切圖片，而設計師又無法忍受變形的圖片時，真的很令人苦惱。
以下就是既可以保持圖片原有比例，又不用裁切圖片的兩種方法，前提是這兩種方法圖片外都必須包著容器。
再計算所需設定的圖片長寬比-(高/寬)*100。
常用比例如下:
將容器內容設為水平置中
以下就是既可以保持圖片原有比例，又不用裁切圖片的兩種方法，前提是這兩種方法圖片外都必須包著容器。
ㄧ：利用: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;/*設定圖片垂直置中*/
}
範例如下