Question

我是一位新的但致力于打算为朋友创建网站的人。这是基本的，但一直存在 - 但我一直有一个重大问题。

虽然内容在桌面上正确显示，但在移动设备上我无法阻止图像溢出超出导航栏的边界。这真是令人沮丧，因为我的谷歌地图和文本页面显示得很好。

我知道我的HTML / CSS对于经验丰富的人来说看起来非常难看，但我希望将来能够学习和改进最佳实践方法。马上我的主要目标只是让这个网站建立并从那里建立我的技能。

我期待改变各种代码，但没有运气，所以任何洞察如何解决这个问题将非常感激。我的代码如下......

        <!DOCTYPE html>
    <html>
    <head>
      <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <nav class="navbar navbar-fixed no-padding" role="navigation">
    <div class="container-fluid">
    <div class="jumbotron">  
    <div class="background">
      <div class="navbar-header"> 
    <div class="row-fluid">
      <div class="span2 offset2"><br><br><br></div>  

         <div class="span5"><h4 class ="title1">Marvelous Grass Trees for Sale in Melbourne</h4></div>
        <br>

    </div> 
     </div>
     <div>  
    <ul class="nav">      
    <li class="active"><a href="index.html">Home</a></li>
    <li class="active"><a href="about.html">About</a> 
    <li class="active"><a href="prices.html">Prices</a></li>     
    <li class="active"><a href="contact.html">Contact</a></li>


    </div>
    </div>
    </div>
      </div>  
      </div>  
    </div>
    </div>
    </nav>

     <br>
      <body> 
        <br>

             <div class="container">

        <div class="row">
            <div class="col-md-8">
                <div class="imgAbt">

                  <img style='float:right;width:800px;height:600px; margin-right:10px;' src="Tree1.jpg" />
                </div>
            </div>       
            <div class="col-md-4" >
            <br>  
            <h1 class="header" style="padding-left:30px" >About Me</h1>    
                <p class="text" style="padding-left:30px" >Grass Trees are a protected species ...</p>
            </div>
        </div>
    </div>     
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br> 
    <br>
    <br>
    <br>
    <br>
    <br>      

           <div class="container">
         <h1 class="header">About Me</h1>
        <div class="row">
            <div class="col-md-4">
                <div class="imgAbt">

                  <img style='float:left;width:800px;height:600px; margin-right:10px;' src="Tree2.jpg" />
                </div>
            </div>
            <div class="col-md-8">
                <p class="text">Our aim is to make these iconic plants...</p>
            </div>
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>  
    <br>
    <br>
    <br>
    <br>
    <br>        

    <footer>    

    <div class ="social"> 
    <p class="text">You can also connect with us anytime on <a href="https://www.facebook.com/[page link to be created]">Facebook</a> to receive our latest news and special discounts available exclusively all our followers</p>
    </div>     


    <footer>
    <div class="footer1">&copy; 2018 Grass Trees</div>
    </footer> 

**CSS**


    html {
      overflow-x:hidden;
    }


    .jumbotron {
    background-color: #f5a600; 
    height: 100%;
     margin-right: -10px;
      margin-left: -10px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 13px;
    }

    .navbar-fixed {
      width: 100%;
    height: 100%;
    text-align: center;
    margin-top: -7px;   
    }

    no-padding {
    padding-left: 0;
    padding-right: 0;  
    }

    .title1 {
     color: #467340;
    }

    h5 { 
    margin-top: -5px;   
    font-size: 41px;  
    text-align: center;  
    list-style-type: none;     
     letter-spacing: 7px; 
    color: yellow;    
    }

    .active {
    font-size: 35px;   
    text-align: center;
    display: inline;
    list-style-type: none;
    margin-left: 2%;
    margin-right: 5%;  
    }

    .nav li.active a {
    color: #096445;   
    }

    .test {
    text-align: center;
    font-family: 'Open Sans';
    font-size: 40px;
    color: #0d865d;  
    }

    .test1
    {
    text-align: center;
    font-size: 15px;
    color: #668B8B;  
    }


    .cta {
    font-size: 20px;
    }


    .bodytext {
    text-align: center;    
    }


    .social {
    text-align: center;    
    }



    /* This is your footer section*/

    .footer1 {
    text-align: center;       
     font-family: 'Open Sans';
        font-size: 10px;
      color: #000000;
      letter-spacing: 2px;

    }

    .iframe-container{
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
    }
    .iframe-container > *{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .no-padding {
      padding-left: 0;
      padding-right: 0;
    }

    .header {
    color: #096445; 
    }

    .text {    
    color: #17668f;
    }


    .img-responsive{
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
    }
    .img-responsive > *{
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

Correct display

Answer 1

这取决于你想要的具体内容，但基本是

<img style='float:right;width:800px;height:600px; margin-right:10px;' src="Tree1.jpg" />

这将根据父块元素

进行缩放

有关bootstrap文档的更多信息 https://getbootstrap.com/docs/4.1/content/images/

祝你好运！

看来img大小是固定的

<img style="float:right;width:100%;height:100%; margin-right:10px;" src="Tree1.jpg" />

改为使用

<div style="height: 400px">

这将遵循其父级的col-md-6大小。如果你想要散布得太远，请使用min-width max-width而不是固定宽度

还提示：使用<br>代替SELECT DISTINCT response_set_id FROM responses GROUP BY question_id HAVING COUNT(question_id) > 1

如何确保图像在引导程序的边界内显示？

1 个答案: