Question

我的宽度和高度是“最大”，更宽的图像在容器内是完美的，但较长的，高度方面，似乎漂浮在容器的左侧。我不知道为什么，我研究了这个网站的调整，他们告诉我“最大宽度”等。这是代码。

#top-bar{
                background-color: 54D954;
                width: 100%;
                height: 45px;
                margin: 0 auto;

            }
            body{
                padding:0;
                margin: 0;

            }
            h1{
                color:white;
                font-family: "Comic Sans MS", cursive, sans-serif;
                text-align: center;
            }
            #container{
                max-width: 1000px;
                max-height: 700px;
                margin: 0 auto;
                margin-top: 55px;

            }
            #bottom-bar{
                width: 700px;
                height: 75px;
                margin: 0 auto;
                margin-top: 45px;

            }
            #left{
                width: 100px;
                height: 100px;
                float:left;

            }
            #right{
                width: 100px;
                height: 100px;
                float:right;
            }
            #img{
                max-width: 1000px;
                max-height: 700px;

            }
        </style>
        <body>

            <div id="top-bar">
            <h1>KidsWow Pictures</h1>
            </div>

            <div id="container">
                <img id="img" src="todaypics/img1.jpg"> 


            </div>

            <div id="bottom-bar">
                <img id="left" onClick ="slides(-1)" src="Pictures/trans-left.png">
                <img id="right" onClick ="slides(1)" src="Pictures/trans-right.png">


            </div>



        <script type="text/javascript">
            var numbercounter = 1
            var total = 30

            function slides(x) {
                var Images = document.getElementById("img");
                numbercounter = numbercounter + x;
                if (numbercounter>total) {
                    numbercounter = 1;
                }
                if (numbercounter<1){
                    numbercounter = total;
                }
                Images.src = "todaypics/img"+numbercounter+".jpg";
            }   




            </script>
        </body>

Answer 1

您应该将图像集中在容器内。

        #container{
          margin-top: 55px;
          text-align: center;
        }
        #container img {
          max-width: 1000px;
        }

＆＃13;

var numbercounter = 1
var total = 30

function slides(x) {
  var Images = document.getElementById("img");
  numbercounter = numbercounter + x;
  if (numbercounter>total) {
    numbercounter = 1;
  }
  if (numbercounter<1){
    numbercounter = total;
  }
  Images.src = "todaypics/img"+numbercounter+".jpg";
}

＆＃13;

#top-bar{
                background-color: 54D954;
                width: 100%;
                height: 45px;
                margin: 0 auto;

            }
            body{
                padding:0;
                margin: 0;

            }
            h1{
                color:white;
                font-family: "Comic Sans MS", cursive, sans-serif;
                text-align: center;
            }
            #container{
              margin-top: 55px;
              text-align: center;
            }
            #container img {
              max-width: 1000px;
            }
            #bottom-bar{
                width: 700px;
                height: 75px;
                margin: 0 auto;
                margin-top: 45px;

            }
            #left{
                width: 100px;
                height: 100px;
                float:left;

            }
            #right{
                width: 100px;
                height: 100px;
                float:right;
            }
            #img{
                max-width: 1000px;
                max-height: 700px;

            }

＆＃13;

<body>

            <div id="top-bar">
            <h1>KidsWow Pictures</h1>
            </div>

            <div id="container">
                <img id="img" src="todaypics/img1.jpg" /> 
            </div>

            <div id="bottom-bar">
                <img id="left" onClick ="slides(-1)" src="Pictures/trans-left.png" alt="left" />
                <img id="right" onClick ="slides(1)" src="Pictures/trans-right.png" alt="right" />
            </div>
</body>

＆＃13;

如何在中间div内保持调整后的图片

1 个答案: