Возникли проблемы с центрированием двух последних изображений, и первое изображение раздувается - PullRequest
Новая
       25

Возникли проблемы с центрированием двух последних изображений, и первое изображение раздувается

0 голосов
/ 31 октября 2019

Я изучаю 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%;
}

1 Ответ

0 голосов
/ 31 октября 2019

Вы используете изображение в CSS в качестве свойств фонового изображения. Лучше скачать соответствующее изображение с веб-сайта Apple, а затем использовать их в теге img в вашем HTML. Таким образом, вы получите лучший контроль над изображением.

Также, когда вы используете изображение так, как вы уже его используете, из-за ссылки Apple, она также загружает js-коды и контролирует поведение веб-сайта. Так что проверьте это. Спасибо, я позже.

...