How to stop an image from moving when using different scroll/resolution?-CodePudding

I am currently making a portfolio in HTML/CSS. But I have encountered the problem, that whenever I change either the scroll level or the resolution size, the images on the site moves around. I want them to stay in the block they are currently sitting in, at zoom 100% on a 1920x1080 monitor.

I have tried to change the position in the CSS to absolute, but that removed some images and totally changed the places the one left image was.

Here is the code:

HTML

<body>
    <div >
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
        <div >
            <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
            <div >
              <p>Lorem ipsum..</p>
            </div>
          </div>
    </div>
</body>

CSS

.row {
text-align: center;
}   
  
.containerPortfolio {
position: relative;
text-align: center;
display: inline-block;
margin: 0 auto;
}

.containerPortfolio .content {
position: absolute;
width: 400px;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 400px;
padding: 15px;
}

CodePudding user response：

I found a solution after some more thinking.

I have made a new <div> and given it the class name inblock. After that I just made a few extra lines of CSS like so:

.inblock {
  max-width: 1920px;
  min-width: 1080px;
  margin: auto;
  justify-content: center;
}

And then the problem with my images moving around and going out of their group was fixed. The new updated HTML is as follows:

    <div >
        <div >
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio1.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio2.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio3.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio4.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio5.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio6.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio7.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
            <div >
                <img ondragstart="return false" width="400" height="400" src="images/backgrounds/portfolio8.jpg">
                <div >
                <p>Lorem ipsum..</p>
                </div>
            </div>
        </div>
    </div>

The ondragstart was something I put in afterwards, but it basicly just means that the images can't be dragged around by the user with their mouse.

Hopefully I have explained this enough, and that this will work for other people as well :)