Question

我正在尝试使用bootstrap创建一个简单的网页，其中一些文本固定在顶部，一些更中心的文本固定在页面底部。

在页面中间，我需要一个水平和垂直放置的中央图像，可根据分辨率/设备进行缩放。

页面必须是视口的全高。

我尝试使用以下代码，但它无法正常工作并且是一个错过，必须有一个更简单的方法吗？

徽标图片为450px x 480px

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

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <style>


        html, body {
            height: 100%;
        }

        .holder {
            width: 100%;
            height: 100%;
            min-height: 100%;
            display: block;
        }

        .fill {
            min-height: 100%;
            height: 100%;
        }

        .col-md-12 {
            position: relative; 
            min-height:100vh!important;
        }

        .toptext{
            background-color:#ffffff!important;
            z-index:99999!important;
        }

        .bottomtext {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            text-align: center;
            margin-bottom: 20px;
            background-color: #ffffff !important;
            z-index: 99999 !important;
        }

        .middleimage > img {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index:1!important;
            max-height:350px!important;
        }

        @media screen and (min-width:1px) and (max-width: 767px) {
            h3 {
                font-size: 16px !important;
            }
            .bottomtext{
                bottom:80px!important;
            }
            html,body {
                overflow: hidden!important;
            }
        }

        @media screen and (min-width:567px) and (max-width: 767px) {

            .bottomtext {
                bottom: 80px !important;
            }

            html, body {
                overflow:visible !important;
            }

            .middleimage>img{
                max-height:100px!important;
            }

        }

        @media screen and (min-width:760px)  {

            .bottomtext {
                bottom: 0 !important;
            }

            html, body {
                overflow: visible !important;
            }

            .middleimage > img {
                max-height: 480px !important;
            }
        }

    </style>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>


    <div class="container fill">
        <div class="holder">

            <div class="row">

                <div class="col-md-12 col-sm-12">

                    <div class="toptext text-center">
                        <h3>Top of page info</h3>
                        <hr>
                    </div>

                    <div class="middleimage">
                        <img src="/holdingfiles/mylogo.png" alt="" class="img-responsive " />
                    </div>

                    <div class="bottomtext">
                        <hr>
                        Bottom of page / footer info
                    </div>

                </div>

            </div>

        </div>

    </div>

</body>
</html>

Answer 1

卡尔，

由于您使用的是bootstrap，请在div / img上使用'img-responsive'类，它应该可以很好地扩展。

已编辑：您可以将它用作div的背景图片：查看以下链接，它可以为您提供所需内容

https://css-tricks.com/perfect-full-page-background-image/

垂直/水平居中/中间缩放图像，具有固定的顶部和底部文本

1 个答案: