创建设计区域设计衬衫

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; 
    } 
} 

希望这有助于。