html - Image behaving as if it was only a portion of original image -

sorry if bit confusing try explain. sum have image behave according small part of image.

for example, imagine image of solar system, 1000px width , 1000px height. sun being part of image located 150 pixels top , 150 pixels left , having shape of square of 250 pixels.

i sun part of image occupy full div :

img { width: 100% } 

though if full image of solar system embedded in div. , not centered around sun.

to achieve want have :

img { position: absolute; width: 400%; top: pixel value; left: pixel value; } 

but headache when original div image resides not fixed.

so wondering if existed allows set image top left value , bottom right value, , having rest of image overflow , adjust same way portion of image set boundaries.

using background-image in css instead of <img /> tag make simple , responsive:

.sun {    width: 25%;    height: 0px;    padding-top: 25%;    background-image: url(https://i.imgur.com/3lhaydt.png);    background-size: 400%; /* 400% * 250px == 1000px */    /* edit: little confused, looks need 20% instead.  trying figure out why. */    background-position: 20% 20%; /* 15% of 1000px = 150px */  }

<div class="sun"></div>

if prefer use <img /> tag, can along position: absolute; , overflow: hidden;

.sun {    width: 25%;    height: 0px;    padding-top: 25%;    position: relative;    overflow: hidden;  }    .sun img {    width: 400%;    height: auto;    position: absolute;    top: -60%; /* 60% 15% of 1000px * 400% */    left: -60%;  }

<div class="sun"><img src="https://i.imgur.com/3lhaydt.png" alt="universe" /></div>