2017年9月1日 星期五

Photo Gallery,採用背景圖片的方式,各種縮圖的呈現調整

(參考Stackoverfolw討論)

找到該元件的html,然後修改它的css style

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size: [參考下列方式] ;
}

無調整
照片100%置放,通常會整個超出外框顯示


方法一:
background-size: 100% 100%;
照片不維持原比例,依據外框的長寬伸展到邊緣,沒有被切圖



方法二:
background-size: contain;
照片維持原比例,自動 fit in 外框,同樣沒有切圖,但是內部會留白邊


方法三:
background-size: cover;
overflow:auto;
照片維持原比例,會自動resize依據外框的短邊,長寬多出的部分切掉

沒有留言:

張貼留言