图像不随窗口大小缩放
[英]Image doesn't scale as window size
问题描述
I have tryed most of advice on stackoverflow such as: 
我已经尝试了有关stackoverflow的大多数建议，例如：
How can I resize an image dynamically with CSS as the browser width/height changes? 当浏览器的宽度/高度变化时，如何使用CSS动态调整图像大小？
Image doesn't scale inside flexbox .... 图片无法在flexbox中缩放。
but my logo image still doesn't scale (zoom out when I resize window) as browser window size:( Do I need another logo sizes and use source media tags? 但是我的徽标图像仍不能按浏览器窗口大小缩放（调整窗口大小时会缩小）：（我是否需要其他徽标大小并使用源媒体标签？
Maybe Im just inattentive but what can cause a mistake ? 也许我只是不专心，但是会导致什么错误呢？
.m-page-header { display: flex; } .m-page-header__wrapper { margin: 0 auto; } .m-page-header__img-container { width: 100%; height: 100%; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .m-page-header img { max-width: 100%; height: auto; display: block; } .main-content { display: block; background-image: url("https://image.ibb.co/hTboSm/1_HEADER_bg.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; } .main-content__wrapper { max-width: 960px; margin: 0 auto; } html, body { height: 100%; } body { min-width: 960px; } .visually-hidden { display: none; }
<body> <main class="main-content"> <div class="main-content__wrapper"> <header class="m-page-header"> <div class="m-page-header__wrapper"> <section class="m-page-header__img-container"> <h2 class="page-header__header-text visually-hidden">Game</h2> <img src="https://image.ibb.co/cNjQ7m/1_HEADER_logo.png" alt="Game"> </section> </div> </header> </div> </main> </body>
I want keep logotype sizes relatively background image (when bg become smaller -> logotype become smaller too and it should not take place of all background size. 我想保持徽标大小相对于背景图像（当bg变小->徽标也变小，并且它不应该取代所有背景大小。
1 个解决方案
解决方案1
1 已采纳 2017-11-28 12:36:52
I've edited your css I think this is what you want: 我已经编辑了您的css我想这就是您想要的：
.m-page-header { display: flex; } .m-page-header__wrapper { margin: 0 auto; } .m-page-header__img-container { width: 100%; height: 100%; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; } .m-page-header img { width: 100%; height: 100%; display: block; } @media screen and (max-width:600px) { .m-page-header img { width: 80%; height: 80%; display: block; margin: auto; } } .main-content { display: block; background-image: url("https://image.ibb.co/hTboSm/1_HEADER_bg.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 100%; } .main-content__wrapper { max-width: 960px; margin: 0 auto; } html, body { height: 100%; } .visually-hidden { display: none; }
<body> <main class="main-content"> <div class="main-content__wrapper"> <header class="m-page-header"> <div class="m-page-header__wrapper"> <section class="m-page-header__img-container"> <h2 class="page-header__header-text visually-hidden">Game</h2> <img src="https://image.ibb.co/cNjQ7m/1_HEADER_logo.png" alt="Game"> </section> </div> </header> </div> </main> </body>
JSBin so you change output window easily: http://jsbin.com/vowaqijita/1/edit?html,css,output JSBin，因此您可以轻松更改输出窗口： http ://jsbin.com/vowaqijita/1/edit?html,css,output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.