繁体   English   中英

为什么调整 img 大小会改变背景大小?

why resizing img changes backgroud size?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我尝试更改徽标大小时,整个背景也会更改大小。 如何正确执行? 我希望徽标为 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>

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>

1 Subview 不会随着 superView 的大小变化而调整大小

我有一个superView视图,我在我的代码中创建了一个新View用作子视图。 通知状态视图是超级视图,驱动信息视图是子视图: 但是,当我更改 NotifyStatusView 的大小时,它们会更改 superView 中的每个项目,但 Driver Info View 除外:2 种不同大小 ...

2 自动调整标题大小,并改变窗口大小

目前,我为自己创建的网站有一些代码。 我正在努力使网站适应浏览器窗口大小的变化。 我似乎无法根据浏览器窗口的大小更改标题高度。 对于我的图片,它在CSS中非常简单: 但是当我对标题使用相同的代码时,它不起作用: 标头的高度并没有同时出现,当我检查该元素时,其高度为0px。 ...

3 文档更改大小时调整iframe的大小

我有一个网页,其中包含在iframe(同一域)中运行的应用程序。 iframe的高度是根据iframed文档的高度在加载时设置的。 问题是当iframed文档的大小更改时(通过展开手风琴,菜单等)。 发生这种情况时是否会触发任何事件,可以用来相应调整iframe元素的大小? 我试图绑 ...

4 随着页面大小的更改,容器div无法调整大小的问题

我正在解决一个问题,即我的容器元素不会随着页面大小的改变而调整大小,这会导致在较小的屏幕上显示页面的问题(例如,内容被隐藏,用户无法向下滚动到足以看到它的程度)。 我给有问题的容器(section.padder-content.scrollable)设置了一个比平常小的高度,因此更容易看到。 ...

5 HTML img流浪者效果更改图像大小

我有以下代码在HTML中创建过渡效果: 它可以很好地开始,但是将鼠标悬停在它上面时,它可以恢复到其原始大小(500x500)。 我试图将height =“ 32px” width =“ 32px”添加到每个属性,但是似乎没有帮助。 此外,通过使用GIMP减小图像的尺寸,质量会下降,并 ...

6 css在img上的绝对定位,会改变大小

我以为我一切正常。 一个&lt;img&gt; ,围绕它的div.wrapper (具有position:relative ,以及一个&lt;i class="icon-edit"&gt;&lt;/i&gt; ,其绝对位置位于&lt;img&gt;右上角位置的下方。类似这个: 使用CS ...

7 调整中心响应img的大小,同时保持容器的大小

这是一个矮胖的例子,左(黄色)单元格就是相关的单元格。 它不是特定于引导程序的,但是我使用了它的类来使图像响应。 和相关的CSS,从Bootstrap借来的 我要完成的事情: 按比例将图像放入容器(此处带有一些填充的引导栏)中(确定) 将其保持在中心位置时使其 ...

9 为什么调整大小会导致图像尺寸减小

我继承了一个可以在宽度和高度上调整图像大小的代码。 我还观察到的是,即使图像的高度和宽度增加,它也会减小文件大小。 这是保存图像的调整大小代码和调用函数代码 例如,这可能会更好地解释。我的原始图像为709 * 653像素,文件大小为670 kb 调整大小后,应为1000 * 92 ...

10 为什么Rails图像不使用“ size =>”调整大小?

我在Rails上制作了一个简单的静态网页。 在页面视图内,我有一个嵌入式的ruby代码行,以显示名为“ logos.png”的图像。 我试图显示此图像稍微水平拉伸,并试图通过将以像素为单位的宽度大小从原来的1735 x 552像素增加到2735 x 552像素来做到这一点。 这是我的代码: ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM