CSS：實現圖片縮放的方式

方法一：圖片在頁面中以背景圖的方式出現

html代碼：

<div class="sf-panel">
    <div class="sf-div">
        <p>圖片是背景圖</p>
    </div>
</div>

css代碼：

.sf-panel{
    overflow: hidden;
    width:100%;
    height:100%;
    .img{
        width:100%;
        height:100%;
        background-size:100% 100%;
        transition: all 0.7s ease;
        &:hover{
            background-size:105% 105%;
            transition: all 0.7s ease;
        }
    }
}

鼠標放上去之后，圖片在0.7s的時間內放大至原先的1.05倍，鼠標移出，圖片恢復；

方法二：圖片在頁面中以元素存在，即img

html代碼:

<div class="sf-panel">
    <img src="xxx.png"/>
</div>

css代碼：

.sf-panel{
    overflow: hidden;
    width:100%;
    height:100%;
    .img{
        width:100%;
        height:100%;
        transform: scale(1.0,1.0);
        -ms-transform:scale(1.0,1.0);
        -moz-transform:scale(1.0,1.0);
        -webkit-transform:scale(1.0,1.0);
        -o-transform:scale(1.0,1.0);
        -webkit-transition: transform 0.7s ease;
        transition: transform 0.7s ease;
        
        &:hover{
            transform: scale(1.05,1.05);
            -ms-transform:scale(1.05,1.05);
            -webkit-transform:scale(1.05,1.05);
            -o-transform:scale(1.05,1.05);
            -webkit-transition: transform 0.7s ease;
            transition: transform 0.7s ease;
        }
    }
}

鼠標放上去之后，圖片在0.7s的時間內放大至原先的1.05倍，鼠標移出，圖片恢復；

日常記錄