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>
Positioning Images On Webpage HTML
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Positioning Images On Webpage HTML
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
Re: Positioning Images On Webpage HTML
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!
Thanks!
- Albert Wiersch
- Site Admin
- Posts: 3785
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Positioning Images On Webpage HTML
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?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!
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