Question 257435 in Html Question posted in
Some basic documentation can be found here.

Html – My image cannot fill the to the edges of the screen, specifically on the left side

I have tried to put the padding and margin in the parent container to 0, but still the image cannot fill to the edges. this is my img.
This is my js file:

import styles from './css/Home.module.css';

export default function home()
{
    return(
        <>
            
            <div className= {styles.container}>
                <div className= {styles.pictures}>
                    <img src = "../pictures/home.jpg"/>  
                </div>
            </div>
            
        </>
    )
}

this is my css file:

.container{
    /* position: absolute;
    display: flex;
    justify-content: center;
    margin:0;
    padding:0;
    height: 100%;
    width: 100%; */
    margin: 0;
    padding: 0;
}
.container .pictures img{
    /* max-width: 100%;
    max-height: auto;
    margin-right: 10%;
    padding: 0px;
    border: 10px solid orange;
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px; */
    margin-right: 20px;
}

please help, because I have been stuck with this problem for the past two days

I have tried to put padding and margin to 0 in the parent container, but nothing changes. I have also tried to use margin-right to move the picture to the left, but it didn’t work as well, so now I am so confused on what is the problem within my code.

Tags:

2

Answers


  1. 0

    Just Use this CSS instead of the one that you provided

    .container {
  width: 100%;
  height: 500px;
  margin: 0;
  padding: 0;
  border: 2px solid black;
}

.pictures {
  position: relative;
  height: 100%;
  width: 100%;
}

.pictures img {
  position: absolute;
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}

    I have made the picture container’s position relative and its image’s position absolute so now it will always be inside the container and you can decide how much height and width you want to give to it, also if you want to fit the image properly inside then uncomment this object-fit line and it will fit in the image properly.

    Login or Signup to reply.
  2. 0

    Worked fine when I tested your code. Are you sure it’s not the padding/margin from an element higher up? It might even be the margin of the body element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search