图像自动调整大小与屏幕高度，没有滚动条 - CSS

两天过去了。但我还没有找到任何解决方案。 条件是 -图像自动调整大小与屏幕高度，没有滚动条 - CSS

1.没有滚动条（垂直或水平），

2.屏幕高度未知，因此所有内容（图片和文字）应与屏幕高度自动调整大小，

我的代码是这里 -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HTML Quickstart</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 
    <!-- Bootstrap fremwork main css --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <style> 
     #padding{ 
      padding: 15px; 
     } 
     img{ 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="myDiv"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
       </div> 
       <div class="col-md-4" id="padding"> 
        <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="col-md-12"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</h2></div> 
      </div> 

     </div> <!-- end container --> 
    </div> <!-- end myDiv --> 

</body> 
</html>

我这个link和尝试。

由于内容（不是很多内容）大于屏幕高度，因此是否可以调整屏幕高度？

如果您有任何解决方案，建议或任何问题，请写评论。

谢谢。

来源

2017-04-01 Mofizul I

我已经试过很多次类似原样 '{HTML \t高度：100％; } body { height：100％; \t margin：0px; } .myDiv { \t float：left; \t身高：100％; \t宽度：100％; }' –

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

来源

2017-04-01 03:54:30 an0nh4x0r

它不工作......它显示滚动条。 –

好，如果你想禁用滚动条，然后使用'img {overlay-x：hidden}' – an0nh4x0r

如果你想让你的网页完全响应，你应该遵循the Grid System Of Bootstrap Framework规则。以下是您可以使用的一些网格选项。

我还提供了你的源代码&演示你的情况应该怎么做。你应该学习并利用更多的优势。希望这个答案是你的。 随意问我bro。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Example</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <style> 
 
    .row { 
 
     margin-bottom: 0.3em; 
 
    } 
 
    
 
    .picture { 
 
     padding: 0.3em; 
 
    } 
 
    
 
    img { 
 
     width: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 picture"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" class="img-responsive" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- end container-fluid --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</body> 
 

 
</html>

来源

2017-04-01 04:04:19

感谢您的评论兄弟。这不是一个响应或完全响应的问题。它适应滚动条的问题。内容应该根据屏幕高度进行调整，无需任何滚动条。 –

不客气。我认为您希望您的网页能够在任何设备（例如智能手机，平板电脑，笔记本电脑和PC）中完全响应。 –

您可以使用Flex框布局。我已经删除了Bootstrap网格代码以避免冲突。此外，ID padding被多次使用，这在以下代码中也是固定的。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>HTML Quickstart</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"> 
 
    <!-- Bootstrap fremwork main css --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
    <style> 
 
    html, body, .myDiv, .container { 
 
     height: 100%; 
 
    } 
 
    .container { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 
    .container .image { 
 
     flex: 1; 
 
     display: flex; 
 
     flex-direction: row; 
 
    } 
 
    .container .image img { 
 
     flex: 1; 
 
    } 
 
    .padding{ 
 
     padding: 15px; 
 
     flex: 1; 
 
    } 
 
    img{ 
 
     width: 100%; 
 
     height: 100% !important; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
<div class="myDiv"> 
 
    <div class="container"> 
 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row image"> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/000/fff.jpg" alt=""> 
 
     </div> 
 
     <div class="padding"> 
 
     <img src="https://dummyimage.com/300x300/ccc/fff.jpg" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="row text"> 
 
     <div class="col-md-12"><h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dignissimosus.</h2></div> 
 
    </div> 
 

 
    </div> <!-- end container --> 
 
</div> <!-- end myDiv --> 
 

 
</body> 
 
</html>

来源

2017-04-01 04:09:04 shaochuancs

非常感谢。你的答案正在工作，但期待更合适的答案。 –

图像自动调整大小与屏幕高度，没有滚动条 - CSS

回答

相关问题