Center image that is bigger than the screen

Question

I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.

Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.

CSS:

.page_container {
width: 980px;
margin: 0 auto;
}

.image {
position: absolute;
left: 0;
right: 0;
}

HTML:

<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>

enter image description here

do you have to use an image? you can use a background image in the body an center it — Matías Cánepa, Jun 10 '13 at 12:56
What is the width of the screen you are using? If the screen's width is 1200px, then it will absolutely position the image to that width - not the width of the container it's in. — eatonphil, Jun 10 '13 at 12:56
[This question](https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working) might help — Radllaufer, Jul 19 '21 at 10:21

score 3 · Answer 1 · answered Jun 10 '13 at 15:14

pls use the position: relative for the image.like this:

<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>

css code:

.page_container {
width: 980px;
margin: 0 auto;
  background: orange;
}

.image {
  position: relative;
  left: 50%;
  margin-left: -600px;
}

the margin-left is equal to the　img's width/2. pls view the demo.

this would be perfect if it shortened the image both from the left and the right and not only from the right. — Andrew, Jun 12 '13 at 08:32

Mahmoude Elghandour · Answer 2 · 2013-06-10T13:58:22.203

1

You Can Try This

 <div class="popup">
 <div class="wrapper">
 <img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
 </div>
 </div>

CSS:

.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative; 
left:-50%;

/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}

Example : jsfiddle

by Elad Shechter

edited Jun 10 '13 at 13:58

answered Jun 10 '13 at 13:19

Mahmoude Elghandour

2,921
1
22
27

this kinda does what I want, except that I don't want the image to be fixed. – Andrew Jun 12 '13 at 08:30

score 0 · Answer 3 · answered Jun 10 '13 at 13:23

0

.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}

answered Jun 10 '13 at 13:23

l2aelba

21,591
22
102
138

this keeps it left aligned and only makes it smaller from the right – Andrew Jun 12 '13 at 08:31

score 0 · Answer 4 · answered Aug 08 '14 at 17:38

You can try this way:

HTML:

<div class="wrapper">
    <div class="image">
        <img src="img/img.jpg">
    </div>
</div>

JS:

<script>
$(document).ready(function() {
    $('div.image').each(function() {
          var imageSrc = $(this).find('img').attr('src');
          $(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
    });
});
</script>

CSS:

.wrapper {
    float: left;
    width: 100%;
    overflow: hidden;
}
.wrapper .image img {
    visibility: hidden;
}

Tushar · Answer 5 · 2020-01-06T10:41:06.700

0

Easy way to center <img /> tag.

body {
  margin: 0;
}

.warpper img {
display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover
}

<div class="warpper">
  <img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>

edited Jan 06 '20 at 10:41

answered Jan 03 '20 at 14:40

Tushar

4,280
5
24
39

This is a soltution, only thing is that it won't work in IE. – Jakob Sternberg Feb 25 '21 at 14:04

Jakob Sternberg · Answer 6 · 2021-02-25T14:03:16.143

0

How about this: https://jsfiddle.net/squadjot/hva34oju/

HTML:

    <div id="imgwrap">
      <img src="https://i.stack.imgur.com/gkOwi.jpg">
    </div>

CSS:

    #imgwrap {
      text-align:center;
    }
    
    #imgwrap img {
      margin:0 -1000%; /* don't ask :P */
    }

Works in every browser i've tried. IE, Chrome, Opera, FF

edited Feb 25 '21 at 14:03

answered Feb 25 '21 at 13:51

Jakob Sternberg

1,758
14
12

score -1 · Answer 7 · answered Jun 10 '13 at 12:56

-1

background-size:auto;

set this property for your image

answered Jun 10 '13 at 12:56

Aravind30790

974
9
22

score -1 · Answer 8 · answered Jun 10 '13 at 13:07

-1

Try this:-

  .image {
    position: absolute;
    left: -50%; 
  }

I think it will work for bigger images...

answered Jun 10 '13 at 13:07

SaurabhLP

3,619
9
40
70

score -1 · Answer 9 · answered Jun 10 '13 at 13:19

-1

.image { position: absolute; left: -50%; }

answered Jun 10 '13 at 13:19

Shalim

7
2

this only makes it smaller from the right side, while keeping it at the same position on the left – Andrew Jun 12 '13 at 08:30

Center image that is bigger than the screen

9 Answers9

Related