あまりにも多くのスペースを必要とするHTML要素のサイズを小さくする方法

Question

私のページ上に2つのdivを整列させたい場合は、両方の要素のCSSに{display：inline-block;}を設定しましたが、 「トンの仕事、私はクロームで見上げると、私は要素のサイズが膨大であること（900x330）を見つけた、それが整列取得から要素を停止しているものはおそらくだ

HTML：

<div id="shopmain" align="center" style="margin-bottom:30px;margin-top:10px;align-items: center;"> 

    <div id="shop1" width="25%"> 

     <img id="1" src="images/shop/1/1-1.jpg" style="width:20%"> 

     <p style="color:#974A2B;margin-bottom:1px;">TRIANGLE I</p> 
     <p style="color:#974A2B;margin-top:1px;">88,99€</p> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-1" onclick="document.getElementById('1').src='images/shop/1/1-1.jpg'">1-1</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button1-1"); 
      buttons.innerHTML = '<img src="images/shop/1/1-1c.jpg" />'; 
      </script> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-2" onclick="document.getElementById('1').src='images/shop/1/1-2.jpg'">1-2</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button1-2"); 
      buttons.innerHTML = '<img src="images/shop/1/1-2c.jpg" />'; 
      </script> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-3" onclick="document.getElementById('1').src='images/shop/1/1-3.jpg'">1-3</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button1-3"); 
      buttons.innerHTML = '<img src="images/shop/1/1-3c.jpg" />'; 
      </script> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button1-4" onclick="document.getElementById('1').src='images/shop/1/1-4.jpg'">1-4</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button1-4"); 
      buttons.innerHTML = '<img src="images/shop/1/1-4c.jpg" />'; 
      </script> 

    </div> 
    <div id="shop2" width="25%"> 

     <img id="2" src="images/shop/2/2-1.jpg" style="width:20%"> 

     <p style="color:#974A2B;margin-bottom:1px;">TRIANGLE II</p> 
     <p style="color:#974A2B;margin-top:1px;">88,99€</p> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-1" onclick="document.getElementById('2').src='images/shop/2/2-1.jpg'">2-1</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button2-1"); 
      buttons.innerHTML = '<img src="images/shop/2/2-1c.jpg" />'; 
      </script> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-2" onclick="document.getElementById('2').src='images/shop/2/2-2.jpg'">2-2</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button2-2"); 
      buttons.innerHTML = '<img src="images/shop/2/2-2c.jpg" />'; 
      </script> 

     <button style="height:15px;width:15px;padding:0;border:none;background:none;" id="button2-3" onclick="document.getElementById('2').src='images/shop/2/2-3.jpg'">2-3</button> 

      <script type="text/javascript"> 
      var buttons = document.getElementById("button2-3"); 
      buttons.innerHTML = '<img src="images/shop/2/2-3c.jpg" />'; 
      </script> 

    </div> 

</div><br/> 

CSS：

#button1-1 {display:inline-block;} 
#button1-2 {display:inline-block;} 
#button1-3 {display:inline-block;} 
#button1-4 {display:inline-block;} 
#button2-1 {display:inline-block;} 
#button2-2 {display:inline-block;} 
#button2-3 {display:inline-block;} 
#shopmain {display:inline-block;} 
#shop1 {display:inline-block;margin-right:10px;margin-left:10px;} 
#shop2 {display:inline-block;margin-right:10px;margin-left:10px;} 

すべての画像のデフォルトサイズは900x1350ですが、画像は180x270として画面に表示されます。

ありがとうございました。

Answer 1

私たちは問題を見ることができるようにペンを掲示することができれば助けになります。しかし、私の提案は幅の代わりにmax-widthを使うことです。