Center oversized image horizontally in browser window using css or js

I know how to centre an image in a browser window so that when the window is wider than the image so the image is in the centre, and when the window is narrower then the image so the image left edge is aligned with the window left edge.

However is there a way to centre the image so that when the window is narrower than the image so the image is still centred?
LVL 1
ncwAsked:
Who is Participating?
 
Julian HansenCommented:
Not sure if that will work.

You can try something like this. Two solutions presented.
1. Div with a background image
2. Image positioned absolutely left 50% and then margin-left negative half the image width.
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
img {
  position: absolute;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  border: 1px solid blue;
}
div{
 height: 200px;
 background: url(images/t92.jpg) no-repeat center 0;
 border: 1px solid red;

}
</style>
</head>
<body>
   <div></div>
   <img src="images/t92.jpg" />
</body>
</html>

Open in new window

t92.jpg
0
 
ProphionCommented:
Add this CSS to the image:

position: relative;
margin:0 auto;
0
 
shivakanthbexpertCommented:
center horizontally   <img src="logo.png"  style="margin:0 50%">>


center vertically and horizontally     <img src="logo.png" style="margin:50%">
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
@shivakanthbexpert I believe the requirement was keeping the image centered when the browser width exceeds the width of the image.
0
 
COBOLdinosaurCommented:
You can probably hack something with scripting to calculate the value for a negative margin, or attempt to calculate a scroll value to try and center it.  Whatever you do will be unreliable and the page will look broken under a lot of conditions, and I expect the users will not care much for the attempt.

You would be better to look for design alternatives.  If you post a link to the page we might be able to suggest alternatives.

Cd&
0
 
ncwAuthor Commented:
I've requested that this question be deleted for the following reason:

I don't think it is possible. I know how to center an image within the browser window, but not to center the image when the browser window width is narrower than the image width - like centering the browser window over the oversized image.
0
 
Julian HansenCommented:
I believe my earlier post will solve this problem (unless the browser window is ridculously narrow).

You can either position a background image on the body element or in a div as shown above.

The following two url's demonstrate

http:/www.marcorpsa.com/ee/t90.html
http:/www.marcorpsa.com/ee/t151.html
0
 
Julian HansenCommented:
I believe my first post addressed the problem. The author never came back to me on this - I have posted a follow up that demonstrates the solution based on the earlier post.
0
 
COBOLdinosaurCommented:
I believe http:#a38353620  by julianH is as close to a solution as you are going to get.  There is not much you can do with a poor design, but that should work under some circumstances.

Cd&
0
 
ncwAuthor Commented:
I believe JulianH's solution only centers the image within the browser window up to the point that the browser window is the same width as the image, ie when the left edge of the image is aligned with the left edge of the browser, and then as the browser windows gets narrower so the image remains left aligned. The links provided only seem to go to the EE homepage.

I think COBOLdinosaur was closest.
0
 
Julian HansenCommented:
Actually that is not correct

Unfortuantely  I left a '/' - here they are again

http://www.marcorpsa.com/ee/t90.html
http://www.marcorpsa.com/ee/t151.html

I have attached screen shots of this page

Full image is here

http://www.marcorpsa.com/ee/images/t92.jpg

Please look at the links posted - you will see that your assessment is incorrect.
ee1.jpg
ee2.jpg
0
 
ncwAuthor Commented:
Excellent, just what I wanted. Sorry for the miss-understanding, may be I couldn't get it to work at the time, that's where a demo link helps so much more.
Thanks!
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.