Cannot resize image in CSS because it overflows a

Question

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?

score 1 · Answer 1 · answered Jan 26 '22 at 21:12

1

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>

answered Jan 26 '22 at 21:12

Stack Underflow

2,363
2
26
51

Thanks. But when I do this, the image just stretches: https://ibb.co/jwDBH4y Even adding `width: 20px` does not help – Victor M Jan 26 '22 at 21:25
Try searching 'prevent image from stretching css'. Here's a result that might be helpful: https://stackoverflow.com/a/58380218/3291390. – Stack Underflow Jan 26 '22 at 21:29
Right, but I'm also wondering, why is this happening in my case? It seems it doesn't happen for you or for others...? – Victor M Jan 26 '22 at 21:30
Try running it in a different browser. If your code is the same then I don't know why your results would be different. – Stack Underflow Jan 26 '22 at 21:33
@VictorM Do you have any CSS other than what you posted? – Stack Underflow Jan 26 '22 at 21:37
Yes but I do not use it in the HTML code? – Victor M Jan 26 '22 at 21:39
Well, I don't know then. It may have something to do with React, I'm not familiar with React at all so I wouldn't know about that. – Stack Underflow Jan 26 '22 at 21:42
But I did notice from the image you linked that it looks like it is not the image itself stretching but the entire `.header-left` flex container. – Stack Underflow Jan 26 '22 at 21:46
@VictorM See the **EDIT** portion of my answer. Using a negative `z-index` or `overflow-y: hidden;` should make your image appear like it is not overflowing the height of the div... not a react issue. – Kameron Jan 26 '22 at 21:47

Kameron · Answer 2 · 2022-01-26T21:21:49.347

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>

score 0 · Answer 3 · answered Jan 26 '22 at 21:15

0

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

answered Jan 26 '22 at 21:15

Jan Kyu Peblik

1,435
14
20

score 0 · Answer 4 · answered Jan 26 '22 at 21:16

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.

Cannot resize image in CSS because it overflows a

4 Answers4