Question

我已经在stackoverflow上尝试了大部分建议，例如：

How can I resize an image dynamically with CSS as the browser width/height changes?

但我的徽标图片仍然没有缩放（当我调整窗口大小时缩小）作为浏览器窗口大小:(我是否需要其他徽标尺寸并使用源媒体标签？

也许我只是不注意但是什么可能导致错误？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我希望保持标识尺寸相对背景图像（当bg变小时 - ＆gt;标识也变得更小，它不应该取代所有背景尺寸。

Answer 1

我已编辑过你的pickle我认为这就是你想要的：

＆＃13;

css

＆＃13;

.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;
}

＆＃13;

JSBin，因此您可以轻松更改输出窗口：http://jsbin.com/vowaqijita/1/edit?html,css,output

图像不会缩放为窗口大小

1 个答案: