使用vh和vw时CSS网页没有响应_Css_Twitter Bootstrap_Responsive Design

使用vh和vw时CSS网页没有响应

css twitter-bootstrap responsive-design

使用vh和vw时CSS网页没有响应,css,twitter-bootstrap,responsive-design,Css,Twitter Bootstrap,Responsive Design,我有以下简单的网页。这里我用vh表示图像高度。但当我将其调整为小屏幕大小时，背景部分的大小无法正确调整在不考虑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>

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

在不考虑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>


部分{
背景色：rgb（200200）；
填充：10px 0px 30px 0px；
}
.编辑图像img{
最大高度：80vh；
填充：30px 30px 30px 30px；
}

错误（小屏幕）：

正确（正常网页）：

嘿，我注意到您忘记添加视口元：

也许这会解决您的问题

嘿，我注意到您忘记添加视口元：

也许这会解决您的问题

这里有一个有效的解决方案。基本上只是在css中添加了

max width

。还创作了小提琴

请注意，固定填充（对于

和

这是一个有效的解决方案。基本上只是将

最大宽度添加到css中。还创建了一个小提琴
请注意，固定填充（对于
和