創建設計區域設計襯衫

Question

我想創建這樣的設計區域。所有設計圖片必須在這裏 我不知道這樣做。任何人都可以幫助我 謝謝！

Answer 1

您只需要一個隱藏溢出的圖像包裝器。當然，您也可以使用背景圖片和背景大小進行播放。這裏是一個代碼示例第一個解決方案：http://codepen.io/webdesignberlin/pen/BoMGyw

HTML：

<div class="shirt"> 
    <figure class="shirt__area"> 
    <img src="http://letscode.ghost.io/content/images/2015/09/stackoverflow.png" alt="Stackoverflow Logo" class="shirt__image"> 
    </figure> 
</div> 

SCSS：

.shirt { 
    width: 419px; 
    height: 437px; 
    padding-top: 70px; 
    background: url('http://i.stack.imgur.com/9Aodf.png') 0 0 no-repeat; 

    &__area { 
    width: 200px; 
    height: 300px; 
    margin: 0 auto; 
    border: 1px solid #ddd; 
    overflow: hidden; 
    } 

    &__image { 
    max-width: 100%; 
    height: auto; 
    } 
} 

希望這有助於。