无法将最后两张图像居中，并且第一张图像被夸大了

Question

我正在学习 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%;
}

Answer 1

您正在使用 CSS 中的图像作为背景图像属性。 最好从苹果网站下载相应的图像，然后在 HTML 的 img 标签中使用它们。 这样您就可以更好地控制图像。

此外，当您因为苹果链接而以您已经使用的方式使用图像时，它还会下载 js 代码并控制网站的行为。 所以检查一下。 谢谢，我稍后。

无法将最后两张图像居中，并且第一张图像被夸大了

问题描述

1 个解决方案

解决方案1
1 2019-10-31 17:14:27

无法将最后两张图像居中，并且第一张图像被夸大了

问题描述

1 个解决方案

解决方案1 1 2019-10-31 17:14:27

解决方案1
1 2019-10-31 17:14:27