Question

我无法使用flexbox正确调整bakcground图片的大小

HTML

  <head>
    ....
        <link rel="stylesheet" media="screen and (max-width: 768px)" href="/css/mobile.css">
    <link rel="stylesheet" href="/css/style.css">
     ....
  </head>
  <body>
   .........
   <section id="home-info">
        <div class="info-content">Text</div>
         <div class="info-img"></div>
   </section>
    .............
    </body>

css / style.css

  html, body {
      height: 100%;
     }
  #home-info {
      display: flex;
      height: 25rem;
     }
   #home-info div {
      flex: 1;
    }
   #home-info .info-img {
       background: #333 url('../images/some_image.jpg')no-repeat center center/cover;
       height: 100%;
     }
   #home-info .info-content {
         height: 100%;
     }

/css/mobile.css

  #home-info {
     flex-direction: column;
     overflow-y: scroll;
   }

移动设备中的输出底部非常平坦，或者根本没有图像。甚至还可以上下滚动移动设备尺寸屏幕。

使用Flexbox在移动屏幕中无法正确调整背景图像的大小

0 个答案: