我正在学习HTML和CSS，并试图将Apple网站复制为我的第一个实际项目。我在处理图像时遇到麻烦，第一个图像不合比例地夸大了，它太大了。其他两个图像的比例都很好，但是，即使我将父div宽度设置为100％，并且将这些子元素也相应地设置到了页面，它们也会被推到屏幕的右侧。请看看并告诉我我做错了什么。谢谢。
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>Apple</title>
<link rel="stylesheet" href="./apple2.css" type="text/css">
</head>
<div id="wrapper">
<body>
<nav> <!--Main navigation of the site-->
<ul>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
<div id="content">
<div class="airpodspro"> <!--div class 1 of main content-->
<h1>Airpods Pro</h1>
<h4>Magic like you've never heard</h4>
<ul>
<li><a href="#">Learn more ></a></li>
<li><a href="#">Buy ></a></li>
</ul>
</div>
<div class="iphone11pro"> <!--div class 2 of main content-->
<h1>iPhone 11 Pro</h1>
<h4>Pro cameras. Pro display. Pro performance</h4>
<h6>From $24.95/mo. or $599 with trade-in.</h6>
<ul>
<li><a href="#">Learn more ></a></li>
<li><a href="#">Buy ></a></li>
</ul>
</div>
<div class="iphone11"> <!--div class 3 of main content-->
<h1>iPhone 11</h1>
<h4>Just the right amount of everything</h4>
<h6>From $16.62/mo. or $399 with trade-in.</h6>
<ul>
<li><a href="#">Learn more ></a></li>
<li><a href="#">Buy ></a></li>
</ul>
</div>
</div>
</body>
</div>
.html {
font-size: 22px;
}
body {
font-family: Helvetica;
}
html body{
margin:0;
padding:0;
}
img {
max-width: 100%;
}
#wrapper {
margin: auto;
position: relative;
}
nav {
position: relative;
background-color: #3d3d3d;
font-size: 0.9em;
word-spacing: 4em;
padding: 0.04%;
width: 100%;
}
ul{
list-style-type: none;
}
li{
display: inline;
color: white;
}
nav ul {
text-align: center;
}
nav a {
color: white;
}
#content {
width: 100%;
position: relative;
}
.airpodspro {
background-color: #5aa8cc;
height: 800px;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/airpods-pro-
takeover/airpods_pro__fok8ao5xkga6_large.jpg");
}
.iphone11pro {
background-color: #6fffd4;
margin-top: 53%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-11-
pro/hero__dvsxv8smkkgi_large.jpg");
}
.iphone11 {
background-color: #dc84ff;
margin-top: 89%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-
11/hero__dvsxv8smkkgi_large.jpg");
}
.airpodspro, .iphone11pro {
color: #ececec;
}
.iphone11pro, .iphone11 {
height: 500px;
}
.airpodspro, .iphone11pro, .iphone11 {
font-size: 1.5em;
line-height: 1em;
position: absolute;
padding: 5% 40%;
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
您正在CSS中将图像用作背景图像属性。最好从Apple网站下载相应的图像，然后再使用它们在HTML的img标签中。这样，您将可以更好地控制图像。
此外，由于使用了苹果链接，因此您以已在使用的方式使用图像，它还会下载js代码并控制网站的行为。所以检查一下。谢谢，稍后我。