Image doesn't scale as window size

Question

I have tryed most of advice on stackoverflow such as:

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

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.

Zvezdas1989 · Accepted Answer · 2017-11-28T12:56:57.657

I've edited your css I think this is what you want:

.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

Thank you but it is not exactly what I wanted. 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. — prostyash, Nov 28 '17 at 12:52
@prostyash Just use media queries to adjust size of logo on smaller devices I've added example in snippet for you. Also made new JSBin for you. — Zvezdas1989, Nov 28 '17 at 12:56

Image doesn't scale as window size

1 Answers1