圖像自動調整大小與屏幕高度，沒有滾動條 - 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

回答

相關問題