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