How to stop image shrinking when page is resized horizontally in CSS

html css alignment centering
Jack Greenhill picture Jack Greenhill · May 18, 2012 · Viewed 47.6k times · Source

I have a 1920x100 image which is inserted at the top of my page:

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top">

I'd like to have it so that when the page is resized horizontally, the image doesn't shrink with the page, but instead remains in the center of the screen, like this:

enter image description here

It seems like a simple thing that could be easily achieved, but I haven't found a solution.

I could put the image inside a div and set the left position of the div to be -(1920-pageWidth) / 2, but this would rely on JavaScript. I'm looking for a cleaner solution (if there is one), just to minimize complexity on the page, and maximize browser compatibility.

Is there any CSS property I could use to achieve this, or am I going the completely wrong way of achieving this?

Any help appreciated.

Answer

gabitzish picture gabitzish · May 18, 2012

You can add this css property to your image : min-width: 1280px

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
Best way to center a <div> on a page vertically and horizontally?

Best way to center a <div> element on a page both vertically and horizontally? I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More