[英]Image doesn't scale as window size
我已经尝试了有关stackoverflow的大多数建议,例如:
当浏览器的宽度/高度变化时,如何使用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 { 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>
我想保持徽标大小相对于背景图像(当bg变小->徽标也变小,并且它不应该取代所有背景大小。
我已经编辑了您的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,因此您可以轻松更改输出窗口: http ://jsbin.com/vowaqijita/1/edit?html,css,output
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.