画像が、CSS

Question

で設定された寸法よりも大きく表示されています。製品リストを含むwebshopをセットアップしました。各製品は、画像、カートに追加ボタン、セレクタで構成されています。何らかの理由で、画像は画面の大部分を占めています。これは私の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をターゲットにしてください。

など。 #Product imgの代わりに.Product imgを使用してください。

あなたはターゲットIDだけを試してみたいと思いますが、ほとんどのセレクタはクラスです。