Question

如何制作始终适合屏幕的图像，即使在手机上也是如此？我在考虑自动高度宽度调整为背景比例。但我似乎无法做到。

<div id="logo-wrapper"> //wrapper
    <div id="logo"></div> //background image
</div>

https://jsfiddle.net/mak24ktk/

Answer 1

更新css

#logo {
  max-width: 100%;
  height: 50px;/ *Change as you need * /
  width: 50px; / *Change as you need * /
  max-height: 100%;
  background: url("http://lorempixel.com/100/100") center center no-repeat;
  background-size: cover;
  background-color: orange;
}

＆＃13;

/*Tags*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: url("./images/bg2.png");
  display: block;
}


/*End of tags*/


/*Wrappers*/

#body-wrapper {
  max-width: 100%;
  min-width: 30%;
  height: 100%;
  padding: 0 10%;
  position: relative;
}

#header-wrapper {
  padding-top: 1.5vh;
  max-width: 100%;
  height: 9vh;
  margin: 0 auto;
  position: relative;
}

#main-wrapper {
  padding: 1.5vh 0;
  height: 88vh;
  margin: 0 auto;
  position: relative;
}

#logo-wrapper {
  width: 10%;
  height: 100%;
  padding: 0.5%;
  background-color: green;
}


/*End wrappers*/


/*Segments*/

#header {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  position: relative;
  border-radius: 3px;
}

#main {
  min-height: 100%;
  height: auto;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
  border-radius: 3px;
}

#logo {
  max-width: 100%;
  height: 50px;
  width: 50px;
  max-height: 100%;
  background: url("http://lorempixel.com/100/100") center center no-repeat;
  background-size: cover;
  background-color: orange;
}


/*End of segments*/


/*Media queries*/

@media screen and (max-width: 980px) {}

@media screen and (max-width: 650px) {}

@media screen and (max-width: 480px) {}

@media screen and (max-width: 320px) {}

@media screen and (max-width: 240px) {}


/*End of media queries*/

＆＃13;

<body>

  <div id="body-wrapper">
    <div id="header-wrapper">
      <header id="header">
        <div id="logo-wrapper">
          <div id="logo"></div>
        </div>
      </header>
    </div>

    <div id="main-wrapper">
      <main id="main">

      </main>
    </div>

  </div>

</body>

＆＃13;

无论屏幕大小如何，创建图像以适合父级

1 个答案: