Follow Fang!: CSS image 縮放顯示

2013/08/15

CSS image 縮放顯示

最近剛加入一個新創團隊，也開始展開技術上的學習
執行長表示：他不想看到個人照片是過度壓縮而造成變形
能夠讓圖片在Div彈性的縮放，而不是造成比例上的失調

<!DOCTYPE html>

<html lang="zh-tw">
    <head>
        <meta charset="utf-8" />
        <title>CSS scroll Demo</title>
        <style type="text/css">
            
            body {
                background-color: grey;
            }

            .test1 img {
                width: 203px;
                height: 203px;
                margin-left: 43px;
                margin-bottom: 50px;
            }

            .test2 {
                background-color: transparent;
                background-image: url('http://nsysu.airstage.tw/member/images/B996060015/member/me.jpg');
                background-repeat: no-repeat;
                background-position: left top;
                background-attachment: scroll;
                background-size: 100%;
                width: 203px;
                height: 203px;
                margin-left: 0px;
                margin-left: 43px;
            }

            
        </style>
    </head>
    <body>
        <div class="test1"><img src="http://nsysu.airstage.tw/member/images/B996060015/member/me.jpg" width="203px"  height="203px"  ></div>
        <div class="test2"></div>
    </body>
</html>

可以清楚看到第一張圖與第二張圖的差異是縮放的比例差異而已

參考資料：
http://stackoverflow.com/questions/3182683/css-image-mask-overlay
http://www.cssbakery.com/2010/11/css-cookie-cutter-revisited.html
http://www.cssbakery.com/2009/06/background-image.html