So I am trying to change the width of an image in accordance to the width of the screen. I’m working with a friend on a website and my friend has gotten it working on one page of our site. I tried replicating the code however it just doesn’t work with my image. What I am trying to do is replicate this website right here. Like when you change the size of the screen the image gets bigger and smaller: https://asteroidcollision.herokuapp.com/asteroid-hit
If you do not wish to visit the website I have included an image:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled Document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 150% sans-serif;
}
#asteroid {
max-width: 50em;
padding: 1em;
margin: 2em auto;
border: 1px solid #999;
box-sizing: border-box;
background-color: #fff;
}
#asteroid img {
display: block;
width: 100%;
height: auto;
}
#asteroid span {
font-weight: bold;
color: #f00;
}
</style>
</head>
<body>
<div id="asteroid">
<p>
In <b>2027</b> an asteroid called <b>2017PDC</b> has a <span>96%</span> <b>chance</b> of hitting Earth.
A percentage of this <b>extent</b> means that this asteroid has an <b>extremely high</b> chance of of <b>hitting Earth</b>.
</p><p>
Inside this article, you'll learn about the <b>damages and effects</b> that <b>2017PDC</b> could cause.
You'll also realiize how this <b>asteroid collision could change your life</b>.
<p>
<img src="https://asteroidcollision.herokuapp.com/static/asteroidhittingearth.png" width="960" height="450" alt="asteroid hitting Earth">
</div>
</body>
</html>