如何将调整后的图片保留在中间 div 中

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;
        }

 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"; }

 #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; }

 <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>