1. 首页
  2. 问答
  3. 如何更改图像的位置？

如何更改图像的位置？

2016-03-01 63 views
2

我试图将地壳放在中间，即使尺寸不同。但是，当我改变地壳的大小时，它似乎越来越低。我试图在地壳上添加风格，但它似乎并没有留下来。我还将创建一个js小提琴来展示一切： https://jsfiddle.net/x893h72p/11/如何更改图像的位置？

js小提琴上的图像比我有更大的图像，但我不知道如何链接我的实际图像。可以吗？

谢谢。

这里是我的HMTL：

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Pietro's Pizza</title> 
     <script type="text/javascript" src="./js/jquery.js"></script> 
     <link href="css/main.css" rel="stylesheet" type="text/css"> 
    </head> 

    <body class="bodyDiv"> 

     <header class="headerBox" id="top"> 
      <img src="images/logo.png" width=250px height=250px> 
     </header> 

     <article> 
      <form> 
       <div class="bannerBox"> 
        <div class="bannerColumn center"> 
         <select id="sizeId" size="1" name="pizza_size" class="pizzaSize"> 
          <option data-name="title" selected disabled>Select Pizza Size:</option> 
          <option value="4" data-name="Extra Large Pizza" data-price="12.50">Extra Large</option> 
          <option value="3" data-name="Large Pizza" data-price="10.00">Large</option> 
          <option value="2" data-name="Medium Pizza" data-price="7.50">Medium</option> 
          <option value="1" data-name="Small Pizza" data-price="5.00">Small</option> 
         </select> 
        </div> 

        <div class="bannerColumn2 center noRightMargin"> 
         <select id="crustId" size="1" name="crust_type" class="pizzaCrust"> 
          <option data-name="title" selected disabled>Select Crust Type:</option> 
          <option value="1" data-name="Cracker Crust" data-price="0.25">Cracker</option> 
          <option value="2" data-name="Thin Crust" data-price="0.50">Thin</option> 
          <option value="3" data-name="Regular Crust" data-price="0.00">Regular</option> 
          <option value="4" data-name="Thick Crust" data-price="1.00">Thick</option> 
         </select> 
        </div> 
       </div> 

       <div class="threeTextBox"> 
        <div class="textColumn1 hidden" id="toppingsId" > 
         <b>Select Toppings:</b><br> 
         <p> 
          <input type="checkbox" name="extra_cheese_box" id="extraCheeseBox" 
           value ="1" data-label-id="extraCheeseLabel" class="pizzaTopping" 
           data-price=".25" data-name="Extra Cheese" 
           data-image="images/04extracheese.png" data-layer="4"> 
           <label for="extraCheeseBox" id="extraCheeseLebel"><span><span></span></span>Extra Cheese</label><br> 

          <input type="checkbox" name="pepperoni_box" id="pepperoniBox" 
           value ="2" data-label-id="pepperoniLabel" class="pizzaTopping" 
           data-price=".50" data-name="Pepperoni" 
           data-image="images/05pepperoni.png" data-layer="5"> 
           <label for="pepperoniBox" id="pepperoniLebel"><span><span></span></span>Pepperoni</label><br> 

          <input type="checkbox" name="ham_box" id="hamBox" 
           value ="3" data-label-id="hamLabel" class="pizzaTopping" 
           data-price=".75" data-name="Ham" 
           data-image="images/06ham.png" data-layer="6"> 
           <label for="hamBox" id="hamLebel"><span><span></span></span>Ham</label><br> 

          <input type="checkbox" name="bacon_box" id="baconBox" 
           value ="4" data-label-id="baconLabel" class="pizzaTopping" 
           data-price="1.00" data-name="Bacon" 
           data-image="images/07bacon.png" data-layer="7"> 
           <label for="baconBox" id="baconLebel"><span><span></span></span>Bacon</label><br> 

          <input type="checkbox" name="beef_box" id="beefBox" 
           value ="5" data-label-id="beefLabel" class="pizzaTopping" 
           data-price=".75" data-name="Beef" 
           data-image="images/08beef.png" data-layer="8"> 
           <label for="beefBox" id="beefLebel"><span><span></span></span>Beef</label><br> 

          <input type="checkbox" name="shrimp_box" id="shrimpBox" 
           value ="6" data-label-id="shrimpLabel" class="pizzaTopping" 
           data-price="1.50" data-name="Shrimp" 
           data-image="images/09shrimp.png" data-layer="9"> 
           <label for="shrimpBox" id="shrimpLebel"><span><span></span></span>Shrimp</label><br> 

          <input type="checkbox" name="anchovy_box" id="anchovyBox" 
           value ="7" data-label-id="anchovyLabel" class="pizzaTopping" 
           data-price="1.00" data-name="Anchovy" 
           data-image="images/10anchovy.png" data-layer="10"> 
           <label for="anchovyBox" id="anchovyLebel"><span><span></span></span>Anchovy</label><br> 

          <input type="checkbox" name="tomato_box" id="tomatoBox" 
           value ="8" data-label-id="tomatoLabel" class="pizzaTopping" 
           data-price=".20" data-name="Tomato" 
           data-image="images/11tomato.png" data-layer="11"> 
           <label for="tomatoBox" id="tomatoLebel"><span><span></span></span>Tomato</label><br> 

          <input type="checkbox" name="mushrooms_box" id="mushroomsBox" 
           value ="9" data-label-id="mushroomsLabel" class="pizzaTopping" 
           data-price=".30" data-name="Mushrooms" 
           data-image="images/12mushrooms.png" data-layer="12"> 
           <label for="mushroomsBox" id="mushroomsLebel"><span><span></span></span>Mushrooms</label><br> 

          <input type="checkbox" name="green_peppers_box" id="greenPeppersBox" 
           value ="10" data-label-id="greenPeppersLabel" class="pizzaTopping" 
           data-price=".25" data-name="Green Peppers" 
           data-image="images/13greenpeppers.png" data-layer="13"> 
           <label for="greenPeppersBox" id="greenPeppersLebel"><span><span></span></span>Green Peppers</label><br> 

          <input type="checkbox" name="black_olives_box" id="blackOlivesBox" 
           value ="11" data-label-id="blackOlivesLabel" class="pizzaTopping" 
           data-price=".45" data-name="Black Olives" 
           data-image="images/14blackolives.png" data-layer="14"> 
           <label for="blackOlivesBox" id="blackOlivesLebel"><span><span></span></span>Black Olives</label><br> 

          <input type="checkbox" name="green_olives_box" id="greenOlivesBox" 
           value ="12" data-label-id="greenOlivesLabel" class="pizzaTopping" 
           data-price=".40" data-name="Green Olives" 
           data-image="images/15greenolives.png" data-layer="15"> 
           <label for="greenOlivesBox" id="greenOlivesLebel"><span><span></span></span>Green Olives</label><br> 

          <input type="checkbox" name="onion_box" id="onionBox" 
           value ="13" data-label-id="onionLabel" class="pizzaTopping" 
           data-price=".15" data-name="Onion" 
           data-image="images/16onion.png" data-layer="16"> 
           <label for="onionBox" id="onionLebel"><span><span></span></span>Onion</label><br> 

          <input type="checkbox" name="pineapple_box" id="pineappleBox" 
           value ="14" data-label-id="pineappleLabel" class="pizzaTopping" 
           data-price=".65" data-name="Pinapple" 
           data-image="images/17pineapple.png" data-layer="17"> 
           <label for="pineappleBox" id="pineapppleLebel"><span><span></span></span>Pineapple</label><br> 

          <input type="checkbox" name="hot_banana_peppers_box" id="hotBananaPeppersBox" 
           value ="15" data-label-id="hotBananaPeppersLabel" class="pizzaTopping" 
           data-price=".65" data-name="Hot Banana Peppers" 
           data-image="images/18hotbananapeppers.png" data-layer="18"> 
           <label for="hotBananaPeppersBox" id="hotBananaPeppersLebel"><span><span></span></span>Hot Banana Peppers</label><br> 

          <input type="checkbox" name="jalapeno_peppers_box" id="jalapenoPeppersBox" 
           value ="16" data-label-id="jalapenoPeppersLabel" class="pizzaTopping" 
           data-price=".85" data-name="Jalapeno Peppers" 
           data-image="images/19jalapenopeppers.png" data-layer="19"> 
           <label for="jalapenoPeppersBox" id="jalapenoPeppersLebel"><span><span></span></span>Jalapeno Peppers</label><br> 

          <input type="checkbox" name="basil_box" id="basilBox" 
           value ="17" data-label-id="basilLabel" class="pizzaTopping" 
           data-price=".15" data-name="Basil" 
           data-image="images/20basil.png" data-layer="20"> 
           <label for="basilBox" id="basilLebel"><span><span></span></span>Basil</label><br> 
         </p> 
        </div> 

        <div class="textColumn2" id="pizzaImage"> 
<img id="layer1" src="images/01crust.png" class="hidden" style=" position: absolute; top: 350px; "> 
         <img id="layer2" src="images/02sauce.png" class="hidden"> 
         <img id="layer3" src="images/03cheese.png" class="hidden"> 
         <img id="layer4" src="images/04extracheese.png" class="hidden"> 
         <img id="layer5" src="images/05pepperoni.png" class="hidden"> 
         <img id="layer6" src="images/06ham.png" class="hidden"> 
         <img id="layer7" src="images/07bacon.png" class="hidden"> 
         <img id="layer8" src="images/08beef.png" class="hidden"> 
         <img id="layer9" src="images/09shrimp.png" class="hidden"> 
         <img id="layer10" src="images/10anchovy.png" class="hidden"> 
         <img id="layer11" src="images/11tomato.png" class="hidden"> 
         <img id="layer12" src="images/12mushrooms.png" class="hidden"> 
         <img id="layer13" src="images/13greenpeppers.png" class="hidden"> 
         <img id="layer14" src="images/14blackolives.png" class="hidden"> 
         <img id="layer15" src="images/15greenolives.png" class="hidden"> 
         <img id="layer16" src="images/16onion.png" class="hidden"> 
         <img id="layer17" src="images/17pineapple.png" class="hidden"> 
         <img id="layer18" src="images/18hotbananapeppers.png" class="hidden"> 
         <img id="layer19" src="images/19jalapenopeppers.png" class="hidden"> 
         <img id="layer20" src="images/20basil.png" class="hidden"> 
        </div> 

        <div class="textColumn3 center noRightMargin"> 
         <div class="itemDiv hidden" id="toppingItem"> 
          <b>Pizza Items:</b><br> 
         </div> 

         <div class="priceDiv hidden" id="toppingPrice"> 
          <b>&nbsp;</b><br> 
         </div> 

         <div class="orderBtnBox hidden" id="orderBtn"> 
          <input type="submit" class="button round center" id="orderBtn" value="Place Order"> 
         </div> 
        </div> 
       </form> 
      </article> 

      <footer class="threeFooterBox"> 
       <div class="footerColumn"> 
        <h3> 
         Links: 
        </h3> 
        <p> 
         <a href="#top">Home</a><br> 
         <a href="#">Menu</a><br> 
         <a href="#">Catering</a><br> 
         <a href="#contactInfo">Contact Us</a> 
        </p> 
       </div> 
       <div class="footerColumnTable"> 
        <h3 class="center"> 
         Hours: 
        </h3> 
        <table width="280" border="0" cellpadding="4" cellspacing="0" class="hoursTable"> 
         <tbody> 
          <tr align="left" valign="top"> 
           <td>Sunday - Thursday</td> 
           <td>11:00 am - 10:00pm</td> 
          </tr> 
          <tr align="left" valign="top"> 
           <td>Friday - Saturday</td> 
           <td>11:00am - 11:00pm</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="footerColumn" id="contactInfo"> 
        <h3> 
         Contact Us: 
        </h3> 
        <p> 
         123 Main Street<br> 
         Ourtown, Ontario<br> 
         L1A 2B3 
        </p><p> 
         905 434 9191<br> 
         <a href="mailto:[email protected]" target="_top">[email protected]</a> 
        </p> 
       </div> 
       <div class="footerColumnImage"> 
        <img src="images/logo_black.jpg"> 
       </div> 
      </footer> 
     </div> <!-- end .container --> 

     <script type="text/javascript" src="./js/main.js"></script> 

    </body> 
</html>

来源

2016-03-01 user5556453

+0

js小提琴上的图像比我的图像大 - 如果您希望图像在google上具有相同的尺寸搜索例如（300x300 jpg） – Tasos

回答

0

也有一些窍门我使用，你会发现它有用..

img { 
    right: 0; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    position: absolute; 
}

下面将围绕形象，它是相对的容器。

来源

2016-03-01 23:23:57 YonatanAr

相关问题

 相关问题