Change width of image in accordance to the width of the screen

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:

If you do not wish to visit the website I have included an image:

So like when you go to that webpage and resize the screen the image does not stay the same size. Thats what I am trying to accomplish here.

Heres my current code:

Image Filename: image.jpg or jpeg


.imageclass {
       width: 50%;


<img src="img.jpg" class="imageclass">


Thanks for the help. Cheers!

Hi there paulmcburney9,

try it like this…

<html lang="en">

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


 <div id="asteroid">
   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>.
   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>.
  <img src="" width="960" height="450" alt="asteroid hitting Earth">



Thanks! I’ll give it a try!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.