图像显示大于 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;
    }

我正在使用 React，这就是我的组件渲染的样子：

  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，但您的大多数选择器都是类。