Clip an image using CSS NO.1

customize an image to help

by jianmin chen

HTML

<body>
    <div class="clipzone">
        <!-- blog:  http://juliachencoding.blogspot.ca/2016/08/clip-cropping-image-css-learning.html
             current folder: . 
             parent folder: ../
             
            -->
        
        <img class="clipped" id="image1" src="https://g86vqq-dm2305.files.1drv.com/y3mDwtR_vi_Gx2eqYoWheI05MmOzxe8lAll1e2WiEExMwLqmBe6vcr5N4OBF6QAgbt4Aa7ZzM_w1ghvtX5Qb-Yd_QhwzI6-MrjdjkxH2DE217PAfrShsuR7zXXs8oUk2mR0X2CmzKvPWIz5HDloaE75EY4K8I-OVwMVTYCTH3vwyd8?width=503&height=501&cropmode=none" /> 
    </div>
</body>

CSS

body {
}


img
{
  position:absolute;
  clip:rect(200px, 300px, 305px, 200px);   
  border-width: 1px; 
  padding:1px;
  border: 1px solid black; /* think 1 px*/ 
  margin-left: -200px; 
  margin-top: -202px;   
}

.clipzone
{
  position:relative;
  width:501px; 
  height:503px;
  overflow:hidden;
}

.clipped
{
  position:absolute;
}