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

HTML & CSS
1

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:

Screen Shot 2020-03-23 at 9.31.38 AM
Screen Shot 2020-03-23 at 9.31.38 AM721×500 99.5 KB

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

CSS:

.imageclass {
       width: 50%;
}

HTML:

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

</body>

Thanks for the help. Cheers!

2

Hi there paulmcburney9,

try it like this…

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

coothead

2 Likes
3

Thanks! I’ll give it a try!

4

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