CODEWITHSUNDEEP
htmlimageposition
Tapy
Tapy

Reputation: 1054

Images staying at same position in html

I'm working on a basic html page and I'm still learning html. Anyway I have 2 images on my pages that I've placed on the position I want but the problem is that if you resize the web page/ browser the image isn't at it's correct position anymore. Or well it is because I gave it a speficic location with pixels but I want it to remain at the same location no matter how big the browser window is.

If you understand me.

My current code:

<div style="position: absolute; left: 590px; top: 320px;">
<img src="map.png" width="215" height="202">
</div>

Upvotes: 1

Views: 3062

Answers (2)

xate
xate

Reputation: 56

you should use a container element which spans around your content in this instance your image. e.g.

<div id="wrap">
 <img src='' alt=''/>
</div>

now position your #wrap dynamically and your img absolute in the wrap.

#wrap {
  position: relative;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
 }

 #wrap img {
   position: absolute;
   top: abc;
   left: abc;
 }

This way you can make sure that you keep your design responsive but can also maintain your idea of your website.

have fun playing around : )

Upvotes: 0

intelis
intelis

Reputation: 8058

You have to use percentage, for example:

HTML

<img class="imageEl" src="folder-image-transp.png" width="215" height="202">

CSS

img.imageEl{
   position:absolute;
   left: 50%;
   top: 50%;
}

If you want the element to remain at the middle of screen, you also have to apply margin that is as big as a half of an image. Example:

img.imageEl{
   position:absolute;
   left: 50%;
   top: 50%;
   margin-left: -(Half of image width)px
   margin-top:  -(Half of image height)px
}

Upvotes: 3

Related Questions