Img 不使用 css 调整大小答案

【问题标题】：Img not resizing using cssImg 不使用 css 调整大小
【发布时间】：2023-01-03 03:57:21
【问题描述】：

您好我正在尝试按照 youtube 上的教程创建亚马逊主页的标题，但我无法让亚马逊徽标在浏览器左侧显示得更小。

这是我的 Header.js 代码：

import React from 'react';
import "./Header.css";
import SearchIcon from '@mui/icons-material/Search';
import { IconButton } from '@mui/material';
import AddShoppingCartOutlinedIcon from '@mui/icons-material/AddShoppingCartOutlined';

function Header() {
  return (
    <div className="header">
        <img 
            classname="header__logo"
            src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
            alt="amazon logo"
        />

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Deliver to</span>
                <span className="header__optionLineTwo">Singapore</span>
                
            </div>  
        </div>

        <div className="header__search">
            <button className="header__searchFilter">All</button>
            <input className="header__searchInput" type="text"></input>
            <IconButton>
                <SearchIcon className="header__searchIcon" />
            </IconButton>
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Hello, sign in</span>
                <span className="header__optionLineTwo">Account & Lists</span>
                
            </div>  
        </div>

        <div className="header__nav">
            <div className="header__option">
                <span className="header__optionLineOne">Returns</span>
                <span className="header__optionLineTwo">& Orders</span>
            </div>  
        </div>

        <div className="header__nav">
            <div className="header__option">
                <AddShoppingCartOutlinedIcon className="optionCart" />
                <span className="header__optionLineTwo">Cart</span>
            </div>  
        </div>

    </div>
  )
}

export default Header

这是我的 Header.css 代码：

.header {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #131921;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__logo {
  width: 100px;
  object-fit: contain;
  margin: 0 20px;
  margin-top: 18px;
}

.header__search {
    display: flex;
    flex: 1;
    align-items: center;
    border-radius: 24px;
}

.header__searchInput {
    height: 12px;
    padding: 10px;
    border: none;
    width: 100%;
}

.header__searchIcon {
    padding: 5px;
    height: 22px;
    background-color: #cd9042;
}

.header__optionLineOne {
    font-size: 10px;
    color: white;
  }
  
  .header__optionLineTwo {
    font-size: 13px;
    font-weight: 800;
    color: white;
  }

  .header__optionCart {
    display: flex;
    align-items: center;
    color: white;
  }

  .header__nav {
    display: flex;
    justify-content: space-evenly;
  }

呈现的网站现在看起来像这样：

它应该看起来像这样：

请让我知道我做错了什么。谢谢！

【问题讨论】：

标签： css reactjs

【解决方案1】：

看来你在img - class name 犯了一个错误，所以那里没有应用样式。

<img
   className="header__logo"
   src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
   alt="amazon logo"
/>

将 classname 更改为 className

【讨论】：

【解决方案2】：

不要使用宽度使用高度

.header__logo {
  height: 50px;
  object-fit: contain;
  margin: 0 20px;
  margin-top: 18px;
}

【讨论】：