中区画内で調整した画像を保持する方法

-1

幅と高さを「最大」にして、幅の広い画像はコンテナ内部には完璧ですが、長めの画像はコンテナの左に浮いているようです。私はなぜ、私はこのサイトの調整について研究し、彼らは "最大幅"などについて教えてくれたか分からない。ここにコードがある。中区画内で調整した画像を保持する方法

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

出典

2016-10-17 Jon2713

あなたはそれらを中心にしたい場合には、 ''

で画像をラップしようとしています。それ以外の場合は、テーブルを試してみることもできます。しかし、あなたの質問は、どのようにそれらを整列させたいかについては非常に曖昧です。 –

それは働いて、ありがとう：D – Jon2713

イメージをコンテナ内に集中させる必要があります。

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

出典

2016-10-17 03:36:02

ああ、私はそれを得る、ありがとうございます。 – Jon2713

中区画内で調整した画像を保持する方法

答えて

関連する問題