[英]Images auto resize with screen height, no scrollbar - 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>
由於內容（內容不多）大於屏幕高度，因此可以調整屏幕高度嗎？
如果您有任何解決方案，建議或任何內容，請寫評論。
謝謝。
img {
display: block;
max-width: 100%;
height: auto;
}
如果您希望網頁完全響應，則應遵循Grid System of Bootstrap Framework規則。 以下是您可以使用的一些網格選項。
我還為您提供了源代碼和演示如何完成您的案例。 你應該學習並從中獲得更多好處。 希望這能回答你的問題。 隨意問我兄弟 。
<!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>
您可以使用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>
CSS，高度為：自動的圖片，在屏幕調整大小時覆蓋其下方的div（水平握住手機）
[英]CSS, image with height:auto, covers div beneath it upon screen resize (phone held horizontally)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.