[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Center oversized image horizontally in browser window using css or js

Posted on 2012-08-31
14
Medium Priority
?
891 Views
Last Modified: 2012-10-11
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?
0
Comment
Question by:ncw
  • 6
  • 3
  • 2
  • +2
13 Comments
 

Expert Comment

by:Prophion
ID: 38353562
Add this CSS to the image:

position: relative;
margin:0 auto;
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38353620
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
 
LVL 1

Expert Comment

by:shivakanthbexpert
ID: 38353661
center horizontally   <img src="logo.png"  style="margin:0 50%">>


center vertically and horizontally     <img src="logo.png" style="margin:50%">
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38353697
@shivakanthbexpert I believe the requirement was keeping the image centered when the browser width exceeds the width of the image.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38354140
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
 
LVL 1

Author Comment

by:ncw
ID: 38482660
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38482652
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38482661
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38483142
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
 
LVL 1

Author Comment

by:ncw
ID: 38484109
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38485119
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
 
LVL 1

Author Closing Comment

by:ncw
ID: 38485387
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38485427
You are welcome.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question