无法在CSS中调整图像大小，因为它溢出了

Question

我有以下代码：
JavaScript：

import React, { useState } from "react";
import logo from "../Static/white_lotus.jpeg";

import "./LogoSearchProfile_Header.css";
function Header() {
  return (
    <div className="header">
      <div className="header-left">
        <div className="header-logo-link">
        <img
              className="header-logo"
              src={logo}
              alt=""
            />
        </div>
      </div>

    </div>
  );
}

export default Header;

<代码>LogoSearchProfile\u标题。css：

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid lightgray;
}


.header-left{
  margin-left: 2%;
  justify-content: space-between;
  display: flex;
  width: 50px;
  height: inherit;
  align-items: center;
  background-color: red ;
}


.header-logo > img {
  height: 20px;
}

我使用此图像（white\u lotus.jpeg）作为我的徽标的位置：

目前，这产生了：

其中<代码>




Answer 1

当内容超过父级高度时，会发生溢出。使内容高度与父级/容器高度匹配，或不使用任意固定测量值设置高度。

Answer 2

使用<代码>。标题徽标

您的高度：20px实际上是在调用图像和与其关联的类，这是不必要的。我建议使用其中一种，如下所示。

编辑~您也可以使用负z索引或溢出y：隐藏 使图像溢出显示在div后面。这样它就不会再“大”了。

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid lightgray;
}

.header-left {
  margin-left: 2%;
  justify-content: space-between;
  display: flex;
  width: 50px;
  height: inherit;
  align-items: center;
  background-color: red;
}

.header-logo {
  height: 20px;
}

/* img {
  height: 20px;
} */

<div className="header">
  <div className="header-left">
    <div className="header-logo-link">
      <img class="header-logo" src="https://i.ibb.co/3WWwMHR/CSimC.jpg" alt="" />
    </div>
  </div>
</div>

Answer 3

您的图像本身有class标题徽标，您的CSS正在使用

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: white;
  border-bottom: 1px solid lightgray;
}


.header-left{
  margin-left: 2%;
  justify-content: space-between;
  display: flex;
  width: 50px;
  height: inherit;
  align-items: center;
  background-color: red ;
}


.header-logo {
  height: 20px;
}

<div class ="header">
  <div class ="header-left">
    <div class ="header-logo-link">
      <img class ="header-logo"
           src=https://i.stack.imgur.com/CSimC.jpg
           alt=""/>
    </div>
  </div>
</div>