Jon2713 Jon2713 - 1 month ago 7
HTML Question

How to keep adjusted picture inside middle div

I made my width's and height's "max" and the wider images are perfect inside the container but the longer ones, height wise, seem to float left of the container. I am not sure why, i researched about the adjusting on this site and they told me about the "max-width" etc. Here is the code.

#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

You should centralize the image inside your container.

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