为什么调整 img 大小会改变背景大小？
[英]why resizing img changes backgroud size?
问题描述
when i try to change logo size, whole background changes size as well.
当我尝试更改徽标大小时，整个背景也会更改大小。 How to do it correctly?如何正确执行？ i want logo to be 150px by 150px.我希望徽标为 150 像素 x 150 像素。 I want to make signup form page that looks something like this我想制作看起来像这样的注册表单页面
https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png 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>
1 个解决方案
解决方案1
0 2022-09-22 19:15:43
By default, your logo size is too big, and parent div was adjusting according to logo, So if the logo size changes, you whole parent div size will also change.默认情况下，你的 logo 尺寸太大，并且父 div 是根据 logo 调整的，所以如果 logo 大小发生变化，你整个父 div 的大小也会改变。 So give them definite value to adjust accordingly所以给他们一定的价值来相应地调整
Here some changes i made, if that's helps我在这里做了一些改变，如果有帮助的话
* { 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.