Cannot resize image in CSS-CodePudding

I have simple code:

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;

.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;
}

where I'm using this image as my logo:

Currently, this produces

where the image overflows the div and despite everything I try, I can't change the size of the image. Altering the tag header-logo does nothing, it seems. Is there anything I can do? Why does this happen?

CodePudding user response：

Your image itself has the class header-logo and your CSS is selecting its children with >. Try changing your CSS from .header-logo > img to .header-logo or just img.

.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>

CodePudding user response：

Using .header-logo > img is instructing the browser to look at the child of header-logo which in fact there is none.

Your height: 20px is essentially calling to both the image and the class associated with it, which is unnecessary. I would suggest using one or the other, like below.

EDIT ~ you can also use a negative z-index or overflow-y: hidden; to have the overflow of the image appear behind the div. So it doesn't appear to be "larger" anymore.

.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  src="https://i.ibb.co/3WWwMHR/CSimC.jpg" alt="" />
    </div>
  </div>
</div>

CodePudding user response：

Overflow happens when content exceeds parent height. Make content height match parent/container height, or do not set height with arbitrary fixed measurements.

CodePudding user response：

I think what you are trying to do is the following:

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

.header-logo {
  height: 20px;
}

As the img's class is header-logo and the selecter > means an img whose parent has class header-logo which is not the case here.