為什么調整 img 大小會改變背景大小？

Question

當我嘗試更改徽標大小時，整個背景也會更改大小。 如何正確執行？ 我希望徽標為 150 像素 x 150 像素。 我想制作看起來像這樣的注冊表單頁面

https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png

 * { height: 100vh; }.main-container { display: flex; }.image { background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80); background-size: contain; background-repeat: no-repeat; }.logo { display: flex; } /*.logo img { height: 140px; } */

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style:css" /> <title>Sign-up Form</title> </head> <body> <main class="main-container"> <div class="image"> <div class="logo"> <img src="https.//logodix.com/logo/20841.png" alt="logo" class="flower" /> <h1 class="tokyo">Tokyo</h1> </div> </div> <div class="form"></div> </main> </body> </html>

Answer 1

默認情況下，你的 logo 尺寸太大，並且父 div 是根據 logo 調整的，所以如果 logo 大小發生變化，你整個父 div 的大小也會改變。 所以給他們一定的價值來相應地調整

我在這里做了一些改變，如果有幫助的話

 * { box-sizing: border-box; margin: 0; padding: 0; }.main-container { display: flex; height: 100vh; }.logo { display: flex; align-items: center; color: #fff; }.logo img { width: 150px; }.left { display: grid; place-items: center; background-image: url(https://images.unsplash.com/photo-1584983333849-26ca57622ac2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=656&q=80); width: 40%; background-position: center; background-size: cover; background-repeat: no-repeat; }.right { width: 60%; padding: 40px; }

 <main class="main-container"> <div class="left"> <div class="logo"> <img src="https://logodix.com/logo/20841.png" alt="logo" class="flower" /> <h1 class="tokyo">Tokyo</h1> </div> </div> <div class="right"> <h4>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus tempore assumenda error! Laudantium non voluptates provident molestias expedita atque eaque!</h4> <div class="form"></div> </div> </main>