圖片顯示大於CSS中設置的尺寸

Question

我已經建立了一個帶有產品列表的網上商店。每個產品都由圖像，添加到購物車按鈕和選擇器組成。由於某些原因，圖像佔據了屏幕的很大一部分，超過了我給它們的屬性。這是我的CSS：

* { 
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
     font-weight: normal; 
     text-decoration: none; 
     color: #e3e5e8; 
    } 

    body { 
     background: black; 
     max-height: 100%; 
    } 

    #Menu { 
     background-color: black; 
     color: white; 
     max-width: 100%; 
     text-align: center; 
     font-size: 30px; 
     position: relative; 
     top:50%; 
     word-spacing: 150px; 
    } 

    #Menu img{ 
     position: relative; 

     right: 200px; 
     margin-left: 5px; 
     height: 200px; 
     width: 200px; 
    } 

    #Menu:link{ 
     text-decoration: none; 
     margin: 50px; 
    } 

    #Home { 
     background-color: black; 
     height: 300px; 
    } 

    #Webshop { 
     background-color: black; 
     height: 100%; 
     width: 100%; 
    } 

    .Info { 
     max-width: 100%; 
     max-height: 20%; 
     padding: 40px; 
     margin: 0 auto; 
     position: fixed; 
     bottom: 0px; 
    } 

    hr { 
     border: 0; 
     margin: 20px 0; 
    } 

    #Productlist { 
     list-style-type: none; 
     position: relative; 
     display: inline-block; 
     margin-top: 100px; 
     height: 50px; 
     width: 50px; 
    } 

    #Product img { 
     width: 350px; 
     height: 400px; 
     display: inline-block; 
     position: relative; 
     left: 50px; 
     margin-top: 100px; 
    } 

    #Productlist:hover img { 
     opacity: 0.5; 
     -webkit-transition: .3s ease-in-out; 
     transition: .3s ease-in-out; 
    } 

    #Product:hover img { 
     opacity: 1; 
    } 

    #Webshop button { 
     background-color: #141516; 
     position: relative; 
     right: 134px; 
     display: inline-block; 
     z-index: 1; 
     padding: 15px 45px; 
     line-height: 1.8; 
     text-align: center; 
     text-transform: uppercase; 
     font-size: 0.8rem; 
     font-weight: 600; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     transition: all 0.3s; 
     border: 3px solid white; 
    } 

    #Webshop button a { 
     position: relative; 
     padding: 0px; 
     text-align: center; 
     text-transform: uppercase; 
     color: #888888; 
     font-size: 0.8rem; 
     font-weight: 600; 
     line-height: 60px; 
     -webkit-transition: all 0.3s; 
     -moz-transition: all 0.3s; 
     transition: all 0.3s; 
    } 

    #Webshop button:hover a { 
     color: red; 
     z-index: 1000; 
    } 

    #Webshop button:hover { 
     color: black; 
     background-color: white; 
     border: 1px solid white; 
    } 

    #size { 
     display: inline-block; 
     z-index: 1; 
     color: white; 
     position: relative; 
     right: 484px; 
     border: 3px solid white; 
     width: 120px; 
     height: 40px; 
     border-radius: 3px; 
     overflow: hidden; 
     background: #141516 no-repeat 90% 50%; 
    } 

    #size:focus { 
     outline: none; 
    } 

我使用的反應，這是我的組件是如何呈現的樣子：

render() { 
     return (
      <div className='Webshop' id='Webshop'> 
       <li id="Productlist"> 
        <div className='Product'> 
         <img src={Seltzshirt}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
        <div className='Product'> 
         <img src={Seltzshirt}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
       </li> 
      </div> 
     ); 
    } 

是這個問題，我的CSS？這可能是我的問題，因爲我正在使用Webpack Dev Server來預覽我的頁面嗎？

Answer 1

您在每種情況下都沒有使用正確的css選擇器。在您的css中使用#來定位id並使用.來定位class或jsx className。

E.g.使用.Product img而不是#Product img

您似乎專門嘗試和定位id，但大部分選擇器都是類。