<body> <div>original image:</div> <div><img class="original" src="https://g86vqq-dm2305.files.1drv.com/y3mDwtR_vi_Gx2eqYoWheI05MmOzxe8lAll1e2WiEExMwLqmBe6vcr5N4OBF6QAgbt4Aa7ZzM_w1ghvtX5Qb-Yd_QhwzI6-MrjdjkxH2DE217PAfrShsuR7zXXs8oUk2mR0X2CmzKvPWIz5HDloaE75EY4K8I-OVwMVTYCTH3vwyd8?width=503&height=501&cropmode=none" /></div> <div>clip an image (500px x 500px) to get center part - 100px x 100px, text 13</div> <div class="SecondImage"> <div class="clipzone"> <!-- current folder: . parent folder: ../ --> <img class="clipped" id="imgClipped1" src="https://g86vqq-dm2305.files.1drv.com/y3mDwtR_vi_Gx2eqYoWheI05MmOzxe8lAll1e2WiEExMwLqmBe6vcr5N4OBF6QAgbt4Aa7ZzM_w1ghvtX5Qb-Yd_QhwzI6-MrjdjkxH2DE217PAfrShsuR7zXXs8oUk2mR0X2CmzKvPWIz5HDloaE75EY4K8I-OVwMVTYCTH3vwyd8?width=503&height=501&cropmode=none" /> </div> </div> </body>
body { } .original { width: 500px; height: 500px; } #imgClipped1 { 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: -200px; } .clipzone { position:relative; width:501px; height:503px; overflow:hidden; clear: both; } .clipped { position:absolute; }