Reputation: 759
I have the following code:
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_Header.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;
}
where I'm using this image (white_lotus.jpeg
) as my logo:
Currently, this produces:
where the <img>
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?
Upvotes: 1
Views: 209
Reputation: 10846
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 class="header-logo" src="https://i.ibb.co/3WWwMHR/CSimC.jpg" alt="" />
</div>
</div>
</div>
Upvotes: 1
Reputation: 286
I think what you are trying to do is the following:
.header-left > img {
height: 20px;
}
Or
.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.
Upvotes: 0
Reputation: 1537
Overflow happens when content exceeds parent height. Make content height match parent/container height, or do not set height with arbitrary fixed measurements.
Upvotes: 0
Reputation: 2453
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.sstatic.net/CSimC.jpg
alt=""/>
</div>
</div>
</div>
Upvotes: 1