圖像不隨窗口大小縮放
[英]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變小->徽標也變小，並且它不應該取代所有背景大小。
1 個解決方案
解決方案1
1 已采納 2017-11-28 12:36:52
我已經編輯了您的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
我的引導程序輪播背景圖像不隨瀏覽器窗口大小調整
[英]My bootstrap carousel background image doesn't adjust with the browser window size
Chrome瀏覽器無法按比例縮放圖像，使其低於第一個渲染的尺寸
[英]Chrome doesn't scale images proportionally below first rendered size
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.