Question

我有以下简单的网页。这里我用vh来表示图像高度。但是当我将其调整为小屏幕尺寸时，背景部分的大小不会正确调整大小。

如果没有remvoing vh，是否有任何解决此问题的方法。

<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>

   section{
       background-color: rgb(200,200,200);
       padding: 10px 0px 30px 0px;
   }

   .edit_image img{
       max-height: 80vh;
       padding: 30px 30px 30px 30px;
    }

   </style>
</head>
<body>
    <div class="container-full" style="padding: 20px;"> 
        <section>
            <div class="row">
              <div class="col-md-12 col-sm-12  text-center">
                <div class='edit_image' img_id=0><img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'></div>           
              </div>
            </div>
        </section>
    </div>
</body>
</html>

错误（小屏幕）：

正确（普通网页）：

Answer 1

嘿，我注意到你忘了添加视口元：

<meta name="viewport" content="width=device-width" />也许这会解决你的问题

Answer 2

这是一个适合您的解决方案。基本上只是将max-width添加到css中。还创建了一个小提琴https://jsfiddle.net/9p619qwq/

请注意，当页面变小时，固定填充（对于<section>和<img>）将导致问题，因为宽度和填充比率将重叠。

section{
  background-color: rgb(200,200,200);
  padding: 10px 0px 30px 0px;
  text-align: center;
}

.edit_image img{
  max-height: 80vh;
  max-width: 80vw;
  padding: 30px;
}

<div class="container-full" style="padding: 20px;"> 
  <section>
    <div class="row">
      <div class="col-md-12 col-sm-12  text-center">
        <div class='edit_image' img_id=0>
          <img src='http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg'>
        </div>           
      </div>
    </div>
  </section>
</div>

使用vh和vw时，CSS网页无响应

2 个答案: