Img not covering div with React

JavaScript
1

Hello, I have been trying it for longer than a day. I might tried all the combinations but still without result… Any help would really be great :slightly_smiling_face:

No matter what I try, I can not push the image to cover the container div

here is the code:

  • index.js:
    <…>
import Image from "../../images/image.jpg";

<HeroBg>
            <img src={Image} alt={alt}/>
</HeroBg>

-styling.js:

export const HeroBg = styled.div
`
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height: 100%;
    overflow:hidden;
    `;
export const Image = styled.div
`
     -o-object-fit:cover;
    object-fit:cover;
    z-index:1;
    max-width:100%;
`;
2

Can you provide a working example from codepen? Also, you may need to display:block the image.

3

Why is the Image style component a div and not being used? Also, the naming is confusing, you have a styled component name Image and you are importing an image and calling it Image.

Anyway, did you try making the image 100% width/height? Is the image supposed to cover the full page (height and width) or what?

4

I want it to cover the parent div which is covering the full width of the page; and yes I tried width and height 100%

5

codepen says that I have reached the max number of project and does not let me to create a new project… I tried the block as well no result :frowning:

6

So not full page height/width?

Just use something else for the demo, Stackblitz is way better than Codepen for React anyway.

Again. Why is the image component a div and why is it not being used?

7

I also tried to use styled.Img styled.Image and styled.image but none of them worked…
I have three elements:
a parent div inside which there is
the second div
inside which I want to fully cover with the image. The width of the image should be 100% since it is supposed to cover the entire screen from left to right without any margins.

8

It should be lowercase img which is the element name and I still don’t see where you are using it.

You are going to have to post a live example.

I will just repost the code here in case you didn’t look at it.

import styled from 'styled-components';
import './App.css';

const Container = styled.div`
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height: 100%;
  overflow:hidden;
`;

const Image = styled.img`
  object-fit:cover;
  z-index:1;
  width:100%;
  height: 100%;
`;

function App() {
  return (
    <Container>
      <Image src="https://images.unsplash.com/photo-1662638181175-af1629d662c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
    </Container>
  );
}

export default App;
1 Like
9

I believe this is a more solid (simplified) starting point, maybe @lasjorg can correct errors, I am quite a newbie.

(I’d rather start playing around with something that works)

10

Thank you very much Iasjorg I will try to replicate your code and also to get use to Stackblitz. For now I can just say that as soon as I use <Image src …> I get a blank page

11

Did you make sure it is an actual img element you are creating?

styled.img

It also can not be named the same as your image import, or the two will conflict.

BTW, CodeSandbox allows for image uploads in case you need that.

12

Thank you again Iasjorg. I have copied the two files without compiling them. Don’t know if it can be insightful to understand the problem though…

13

You are not importing the Image component, only the .jpg image.

I renamed the image to BGImage

import {
  HeroBg,
  Image
} from './HeroElements';

import BGImage from '../../images/zurich_shiatsu.jpg';

<HeroBg>
  <Image src={BGImage} />
</HeroBg>
1 Like
14

Finally some beautiful image beautifully positioned. Thank you very much. :upside_down_face:

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.