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

时间：2017-04-01 02:48:54

标签： javascript html 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和it。

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

如果您有任何解决方案，建议或其他任何内容，请发表评论。

感谢。

3 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

enter image description here

我还为您提供了源代码＆amp;演示如何完成您的案例。你应该学习并从中获得更多好处。希望这能回答你的问题。 随意问我兄弟。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用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>

相关问题
最新问题