CODEWITHSUNDEEP
htmlcssreactjsoverflow
Victor M
Victor M

Reputation: 759

Cannot resize image in CSS because it overflows a <div>

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:

enter image description here

Currently, this produces:

enter image description here

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

Answers (4)

Kameron
Kameron

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

Omar Diaa
Omar Diaa

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

Jan Kyu Peblik
Jan Kyu Peblik

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

Stack Underflow
Stack Underflow

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

Related Questions