When displaying a Jpeg, the browser is displaying it about twice the size it should be

Browser: Chrome (displaying at 100%)
Desktop Monitor: 4K

When displaying a Jpeg, the browser is displaying it about twice the size it should be. Just like it’s been zoomed in. The Image Map works fine.

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<title>
			Testing
		</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css">
	</head>
	<body>
		<img src="images/Home.jpg" width="3840" height="2560" usemap="#Photo1">
		<map name="Photo1">
			<area shape="rect" coords="2643,272,2861,314" alt="templates" href="http://www.google.com">
		</map>
	</body>
</html>

Style Sheet Code:

body{
	margin: 0;
}

what are your browsers settings? what are your computers setting? universal access? 4k image and a 4k monitor should be 1:1 ratio or close. Usually sites appear smaller. Check your bowsers zoom level now. Did you do this?

<meta name="viewport" content="width=device-width, initial-scale=1">

As mentioned before, try checking your browser zoom. If it’s set to 100% then you could try this:

body{
    width: 100%;
}

img{
    width: 100%;
}

In this situation the body is the image’s container and setting it to 100% should make it scale properly.