How to make image fit to window width

Question

I'm beginner and i have written this simple code

h1,
h3 {
  text-align: center;
}

html,
body {
  height: 100%;
  margin: 10px;
  padding: 0;
}

img {
  padding: 0;
  display: block;
  margin: 0, 10, 0, 10;
  max-height: auto;
  max-width: 100%;
}

.a {
  position: absolute;
  top: 350px;
  left: 20px;
  color: red;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 50px;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <h2 class="a">"Innovation is serendipity, so you don't know what people will make."</h2>
  <img src="image/timBL.jpg" alt="timquote" />


  <h1>Sie Tim Berners-Lee</h1>
  <h3>Inventor of World Wide Web</h3>
  <p>Sir Tim Berners-Lee is inventor of World Wide Web in 1989. He was born in London, England on 8th June !955 He is a scientist and academic whose visionary and innovative work has transformed almost every aspect of ours lives.
  </p>
  <ul>

    <li>Education</li>
    <li>Recent Works/Books</li>
    <li>Awards and Honours</li>
  </ul>

</body>

</html>

I am facing a problem and want to fix it. I have put image and now i don't know what is possible away to make fit to window screen width.

Thanks

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. — Marco Salerno, Nov 07 '17 at 11:22
[Stackoverflow - How to resize an image to fit in the browser window?](https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window) — Calvin Ananda, Nov 07 '17 at 11:24
Possible duplicate of [How to resize an image to fit in the browser window?](https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window) — Tarken, Nov 07 '17 at 11:34
Do you need to set it as a background image or inline image? I noticed you have added margin: 10px to body element with this css property image will never really spread across the browser width. — Vishal, Nov 07 '17 at 12:10

score 0 · Answer 1 · answered Nov 07 '17 at 13:48

As far as I can understand your question, you want your image to fit the view-port's width.
For doing so, first of all please remove every property that you've applied to your image and then simply put:

img { width: 100%; }

Above code will tell your browser to span your image to the view-port's width.

score -2 · Answer 2 · edited Jan 14 '18 at 09:26

-2

use css, give the img a class for example (myImg) and use this

.myImg{
      width: 100%;
}

edited Jan 14 '18 at 09:26

Pedram

15,766
10
44
73

answered Nov 07 '17 at 11:23

Xwede

1
5

How to make image fit to window width

2 Answers2