Question

我试图为我页面的主要部分创建一个背景。图像的大小是640 x 480，我希望它是1204 x 184的容器的背景。我知道之前已经问过这个问题，但没有一个答案适合我。

问题：如何使图像覆盖div的大小，同时保持纵横比，以便我仍能完整地看到图像？。

p.s我添加了我的代码，但我还没有足够的分数来添加图片到我的帖子。

＆＃13;

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.main-container{
    width: 98%;
    margin: auto;
    background: lightgray;
}

header{
    width:80%;
    height: 10%;
    background: grey;
    margin: auto
}
main{
    margin-top: 0px;
    width: 80%;
    height:600px;
    margin: auto;
    margin-top: 10px;
    background: url(https://placeimg.com/640/480/tech);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
   
 }

＆＃13;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Layout practice</title>
</head>
<body>
   <div class="main-container">
       <header>
           <div class="main-header">
               <h1>Header</h1>
           </div>

       </header>

       <main>
           <!-- <div class="main-content">
                -->

       </main>

    <section class="lower-sec">
        <div class="left-box">

        </div>

        <div class="right-box">

        </div>

    </section>

    
   </div>
    
</body>
</html>

＆＃13;

Answer 1

而不是background-size: 100%使用

background-size: contain;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

如何使图像覆盖div的大小，同时保持纵横比，以便我仍然可以完整地看到图像？

1 个答案: