Positioning Images On Webpage HTML

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
vt.2015
Rank 0 - Newcomer
Posts: 2
Joined: Sat Sep 15, 2018 8:31 am

Positioning Images On Webpage HTML

Post by vt.2015 »

Hello all,

I am relatively new to this and am struggling with what I am thinking is a seemingly easy process. I'm hoping it's just a change of syntax that will fix this.

I need to place multiple images on a webpage using HTML that need to move and change size with the size of the browser window. So if I shrink the browser window, it should scale down the image but keep it so it is visible on the webpage. Below is the current code that I have for one of the images and I know my issue is with using Absolute positioning. As of right now, when I move the browser window, it just falls off the page. I would like to be able to customize exactly where they are on the page, which is why I am using Top and Left, instead of aligning it. I have also tried using fixed, relative, and sticky. The other issue that I have is the website builder that I am using allows me to place slideshow images centered on the page, so I do not want my images to cross over this if I scale down the browser window.

Any help would be appreciated! Thanks so much!


<p><img style="position: absolute; top: 10px; left: 1034px; width: 350px; height: 501px;" src="/image.jpg" alt="Image" align="right" /></p>
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Positioning Images On Webpage HTML

Post by Albert Wiersch »

Have you tried using percentages for image widths? That should cause the image to change size (enlarge/shrink) with the size (width) of the browser window (or parent container).
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
vt.2015
Rank 0 - Newcomer
Posts: 2
Joined: Sat Sep 15, 2018 8:31 am

Re: Positioning Images On Webpage HTML

Post by vt.2015 »

Hey Albert! Thanks for the reply. Shortly after I posted this, I did end up using %'s and that fixed one problem. I am still having trouble placing the images on my webpage where I want them though. I have tried using Fixed, Static, Absolute, Relative and Sticky and none of them are giving me the results that I am looking for.

Thanks!
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Positioning Images On Webpage HTML

Post by Albert Wiersch »

vt.2015 wrote: Sun Sep 16, 2018 4:41 pm Hey Albert! Thanks for the reply. Shortly after I posted this, I did end up using %'s and that fixed one problem. I am still having trouble placing the images on my webpage where I want them though. I have tried using Fixed, Static, Absolute, Relative and Sticky and none of them are giving me the results that I am looking for.

Thanks!
Yes, it can be difficult to position items. I do not have a lot of experience with this so I can't be that helpful here but I wonder if the CSS Grid Layout Specification might be helpful here?

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

I'm adding syntax checking support for the grid properties to CSS HTML Validator 2019 but I have not used the properties in actual practice with a real website.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial