Question

我是初学者，我写过这个简单的代码

＆＃13;

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

＆＃13;

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

＆＃13;

我遇到了问题，想要解决它。我已经把图像放了，现在我不知道什么是可能的，以适应窗口宽度。

由于

Answer 1

据我所知，你希望你的图像符合视口的宽度为此，首先请删除您已应用于图像的所有属性，然后只需输入：

img { width: 100%; }

上面的代码会告诉您的浏览器将图像跨越到视口的宽度。

Answer 2

使用css，给img一个类，例如(myImg)并使用此

.myImg{
      width: 100%;
}

如何使图像适合窗口宽度

2 个答案: