Positioning Images On Webpage HTML

Discussion about HTML and XHTML related issues.
Post Reply
vt.2015
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Sat Sep 15, 2018 8:31 am

Positioning Images On Webpage HTML

Post by vt.2015 » Sat Sep 15, 2018 8:33 am

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
Site Admin
Posts: 3342
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Positioning Images On Webpage HTML

Post by Albert Wiersch » Sun Sep 16, 2018 2:29 pm

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).
Image
Albert Wiersch

vt.2015
Rank 0 - Newcomer
Rank 0 - Newcomer
Posts: 2
Joined: Sat Sep 15, 2018 8:31 am

Re: Positioning Images On Webpage HTML

Post by vt.2015 » 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!

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

Re: Positioning Images On Webpage HTML

Post by Albert Wiersch » Sun Sep 16, 2018 6:16 pm

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.
Image
Albert Wiersch

Post Reply