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

Question

I am learning HTML and CSS and I am trying to replicate Apple website as my first real project.我正在学习 HTML 和 CSS 并且我正在尝试复制 Apple 网站作为我的第一个真实项目。 I am having trouble with the images, the first image is overblown out of proportion, it is way too big than it actually is.我在处理图像时遇到了问题，第一张图像被夸大了，它比实际尺寸太大。 The other two images proportions are fine, however, they are pushed to the right of the screen even though I have the parents div width set to 100%, and these child elements set accordingly to the page.其他两个图像的比例很好，但是，即使我将父 div 宽度设置为 100%，并且这些子元素根据页面设置，它们也会被推到屏幕的右侧。 Please have a look and tell me what I am doing wrong.请看看并告诉我我做错了什么。 Thank you.谢谢你。

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

You are using image in CSS As background image properties.您正在使用 CSS 中的图像作为背景图像属性。 Its better download the respective image from apple website and then use them in img tag in your HTML.最好从苹果网站下载相应的图像，然后在 HTML 的 img 标签中使用它们。 This way you will have better control over image.这样您就可以更好地控制图像。

Also when you are using the image the way you are already using because of the apple link, its also downloading js codes and controlling the behavior of website.此外，当您因为苹果链接而以您已经使用的方式使用图像时，它还会下载 js 代码并控制网站的行为。 So check out for it.所以检查一下。 Thanks, me later.谢谢，我稍后。

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

问题描述

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