Question

在普通视图模式下页面看起来很精致但问题是，当页面变小时，body标签中的图像会消失。我曾尝试多次编辑代码，但它从未奏效。

    <!DOCTYPE html5>
    <html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0 ">
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title> home
        </title>
        <style>
                .wrapper {
                         background-color: #66aaee;
                         position:relative;
                         width: 100%; 
                         min-width: 100%; 
                         max-width: 100%;
                         min-height: 100%;
                         max-height: 500%;}
  <!--wrapper is the main div that contains all the content of the page -->  

                .header{
                    background-color: #66bbff;
                    width: 100%;               
                    height: 21.5%;              
                    margin-top: -8%;
                    position: fixed;
                    z-index: 2;}            
    <!-- navigation is a div inside the header and it contains all the menu  -->
                .navigation{                

                            margin-left: 15%;
                            width: 500px;           
                            float: none;}

                 .body {                
                        background-color: black;
                        height: 95%;
                        margin-left: 10%;
                        margin-top:8%;                  
                        width: 80%;
                        }
                 .body img {margin-left: 10%;
                            margin-top: 7%;                    
                            width: inherit;                     
                            float: none;
                            overflow: hidden;}  

                 .body_down {
                             height: 90%;
                             background-color:#44aacc;
                             font-size: 20px;
                             margin-top: 1%;
                            position: relative;
                            z-index: 1;}
<!--body_down is another div that contains some of the body content -->

                 .footer{                   
                        background-color:#ffffff;
                        font-size: 20px;
                        margin-top: 100%;}               

        </style>
    </head>

        <body>
                <div class="wrapper">
                        <div class="header">                        

                                    <div class="navigation">
                                    <img src="image/header.png" width="800px">
                                        <nav>

                                                <ul>
                                                        <li>    <a href="#" style="text-decoration:none" target_="blank"> Home </a> </li>   
                                                        <li>    <a href="#" style="text-decoration:none">About </a>  </li>
                                                        <li>    <a href="#" style ="text-decoration:none"> About Research Buddies </a>  </li>
                                                        <li>    <a href="#" style="text-decoration:none">Products and services </a>  
                                                                <ul>
                                                                        <li> GRAPHIC DESIGN </li>
                                                                        <li> CITATIONS </li>
                                                                        <li> PRINTING </a> </li>
                                                                        <li> PUBLISHING </li>
                                                                        <li> PHOTO EDITING </li>

                                                                </ul>
                                                        </li>
                                                        <li>    <a href="#" style="text-decoration:none"> Promotions </a>  </li>
                                                        <li>    <a href="#" style ="text-decoration:none"> FAQs </a> </li> 
                                                        <li>    <a href="#" style="text-decoration:none"> Contact us </a> </li>
                                                </ul>
                                        </nav>
                                    </div>
                        </div>

                                                                <div class="body"> 

                                                                                    <img src="image/ww.jpg"/>

                                                                </div>
                                                                                <div class="body_down">
                                                                                        body content continues here
                                                                                </div>


                                                    <div class="footer"> 
                                                        the footer is here
                                                    </div>
                </div>
        </body>

    </html>

在普通视图模式下页面看起来很精致但问题是，当页面变小时，body标签中的图像会消失。我曾尝试多次编辑代码，但它从未奏效。

Answer 1

你必须从img中删除宽度。

并在下面使用此css。

img-resposive {

max-width:100%;
height:auto;

}

当我调整页面大小时，我的网页内容重叠并且图像会扭曲。

1 个答案: